fullcalendar VS tui.calendar

10. full-calendar

I combed through the assorted google results and found a promising looking solution called FullCalendar. It advertises itself as working with React, Vue, Angular, or just plain javascript. For today's post, we are going to be looking at their vanilla-javascript, 100% framework agnostic solution.

``` { "name": "pantheon-upstreams/drupal-project", "description": "Install Drupal 9 with Composer on Pantheon.", "type": "project", "license": "MIT", "repositories": [ { "type": "composer", "url": "https://packages.drupal.org/8" }, { "type": "package", "package": { "name": "fullcalendar/fullcalendar", "version": "4.4.0", "type": "drupal-library", "dist": { "url": "https://github.com/fullcalendar/fullcalendar/releases/download/v4.4.0/fullcalendar-4.4.0.zip", "type": "zip" } } }, { "type": "package", "package": { "name": "fullcalendar/fullcalendar-scheduler", "version": "4.4.0", "type": "drupal-library", "dist": { "url": "https://github.com/fullcalendar/fullcalendar-scheduler/releases/download/v4.4.0/fullcalendar-scheduler-4.4.0.zip", "type": "zip" } } }, { "type": "path", "url": "upstream-configuration" } ], "require": { "drupal/adminimal_admin_toolbar": "1.11", "drupal/adminimal_theme": "1.6", "drupal/devel": "4.1", "drupal/feeds": "[email protected]", "drupal/feeds_ex": "[email protected]", "drupal/fullcalendar": "2.0", "drupal/json_feed": "1.2", "drupal/link_attributes": "1.11", "drupal/metatag": "1.16", "drupal/responsive_menus": "[email protected]", "drupal/taxonomy_bulk_actions": "1.0", "drupal/taxonomy_import": "2.0", "drupal/twig_field_value": "2.0", "drupal/twig_tweak": "3.1", "drupal/twig_vardumper": "3.0", "drupal/views_bulk_operations": "4.0", "drupal/webform": "6.0", "drupal/xmlsitemap": "1.0", "drush/drush": "10", "fullcalendar/fullcalendar": "4.4.0", "pantheon-upstreams/upstream-configuration": "" }, "conflict": { "drupal/drupal": "" }, "minimum-stability": "dev", "prefer-stable": true, "extra": { "installer-paths": { "web/core": [ "type:drupal-core" ], "web/libraries/{$name}": [ "type:drupal-library" ], "web/modules/composer/{$name}": [ "type:drupal-module" ], "web/profiles/composer/{$name}": [ "type:drupal-profile" ], "web/themes/composer/{$name}": [ "type:drupal-theme" ], "drush/Commands/contrib/{$name}": [ "type:drupal-drush" ], "web/private/scripts/quicksilver/{$name}/": [ "type:quicksilver-script" ] }, "composer-exit-on-patch-failure": true, "patchLevel": { "drupal/core": "-p2" }, "drupal-scaffold": { "allowed-packages": [ "pantheon-systems/drupal-integrations" ], "locations": { "web-root": "./web" }, "file-mapping": { "[project-root]/.editorconfig": false, "[project-root]/pantheon.upstream.yml": false, "[project-root]/.gitattributes": false, "[web-root]/sites/development.services.yml": false } } }, "config": { "preferred-install": "dist", "sort-packages": true, "platform": { "php": "7.4" } } }

vue-full-calendar - A complete fullcalendar.io wrapper for both Vue 1 and 2

Yeah, it can show a monthly calendar. It's using TUI.calendar component under the hood.

tui.calendar : a JavaScript calendar that has everything you need.

If you want a big calendar as opposed to something like a datepicker, TUI-calendar is really full of features out of the box. react-big-calendar is another alternative which is very flexible and less opinionated.

I used tui.calendar, this is what you see in my screenshot.