Javascript for event calendar

10 Best JavaScript Calendar Plugins For Scheduled Events (2023 Update)

An event calendar allows you to easily manage and share single/recurring events on a weekly, monthly, or yearly calendar interface.

Calendar plugins are really helpful in organizing events when you have a lot of them. While it may be tempting to select the first calendar plugin you find and play with, this should not be the case. The reason is that each plugin has different capabilities, as well as some limitations.

This is a list of 10 best, carefully selected jQuery and PURE JavaScript calendar plugins for organizing and showing events.

These 10 calendar plugins run the gamut from simple to complex but they are all capable of creating a great calendar widget. I chose them because they were easy to use, looked good and were highly configurable.

Originally Published May 14 2019, updated Jan 26 2023

Table of contents:

jQuery Calendar Plugins:

jQuery Calendar Plugin Using HTML Templates — CLNDR.js

A jQuery plugin that allows you to create a pretty clean calendar with event support using HTML template.

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap — Zabuto Calendar

A jQuery calendar plugin working with twitter’s bootstrap that allows you to create a monthly calendar with ajax data events support on your web page.

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap — Zabuto Calendar

A jQuery plugin that provides responsive and easy-to-customize event calendar and date picker for your web application. The events can be stored in a XML file and support for highlighting event days when mouse hover.

Flexible Event Calendar In jQuery — evo-calendar

evo-calendar is a flexible event calendar plugin to display events in a responsive, modern-looking calendar interface.

Mobile-friendly Calendar and Schedule Plugin — jQuery Calendar.js

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Vanilla JS Calendar Libraries:

Feature-rich And Draggable Event Calendar Plugin — FullCalendar

FullCalendar is a lightweight yet powerful and developer-friendly JavaScript library to create flexible, draggable event calendars on the modern web app.

Full-featured Calendar JavaScript Library – tui.calendar

tui.calendar is a powerful, full-featured calendar library used to showcase custom events, schedules, tasks in daily, weekly, and monthly views.

Customizable Event Calendar With Month/Year Selection – Color Calendar

A flexible, customizable, themeable event calendar & month/year picker component written in vanilla JavaScript.

Simple Multilingual Calendar Component With Vanilla JavaScript

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Feature-rich Event Calendar In JavaScript – Calendar.js

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Conclusion:

In this post you’ve learned about 10 handpicked plugins for building modern and clean event calendars. These plugins are more than enough to start using in any web project, from a digital portfolio website to a corporate event booking system.

Of course, the best calendar plugin will also depend on your individual needs. If you’re looking for a simple, responsive calendar to embed in your website, then Simple Calendar is an excellent choice. If you’re looking for flexibility and advanced functionality, however, then FullCalendar might be better for you. Ultimately, it all depends on how much time and effort you want to invest in your calendar plugin—and the end result you desire.

Want more jQuery plugins or JavaScript libraries to create awesome event calendars on the web & mobile? Check out the jQuery Calendar and JavaScript Calendar sections.

More Resources:

Источник

Javascript for event calendar

Tagged as

Stats

Comments and Discussions

Dan Good afternoon My name is Roberto Telles (rti.principal@gmail.com). I wonder if the HTML5 Event/Calendar Scheduler is still supported in the .NET MVC framework. Would it be an old version of this component? Thank you very much in advance. Yours sincerely

You can use the components with any type of backend, including ASP.NET MVC (3/4/5). The backend must be able to process an HTTP request and return JSON data and that is no problem with MVC.

For read-only data this may work well but for read/write access it’s not a good idea. Raw XML files don’t provide any concurrency and even with a single user you are not able to guarantee that the updated file is saved reliably.

First of all, this is a fantastic tool. I find it easy to use.

My only issue with it is that I would like to forbid events that are colliding. And I cannot find a way to implement this on my end.

I know that Daypilot has a collide method but I do not know how to leverage this.

Could you implement such a check in your code ?

There are two version of DayPilot. This article uses the open-source version (DayPilot Lite for JavaScript) which is free to use.

—
My open-source AJAX controls:
DayPilot for JavaScript/HTML5/jQuery — Calendar/Scheduling Control for JavaScript
DayPilot for ASP.NET — Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC — Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java — Calendar/Scheduling Control for Java

Question — if I make any change to the index.cshtml , then the calendar does not show up.
Example, add this after the body:

—
My open-source AJAX controls:
DayPilot for JavaScript/HTML5/jQuery — Calendar/Scheduling Control for JavaScript
DayPilot for ASP.NET — Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC — Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java — Calendar/Scheduling Control for Java

dp.eventMoveHandling = "Disabled"; dp.eventResizeHandling = "Disabled"; dp.timeRangeSelectHandling = "Disabled";

—
My open-source AJAX controls:
DayPilot for JavaScript/HTML5/jQuery — Calendar/Scheduling Control for JavaScript
DayPilot for ASP.NET — Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC — Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java — Calendar/Scheduling Control for Java

—
My open-source AJAX controls:
DayPilot for JavaScript/HTML5/jQuery — Calendar/Scheduling Control for JavaScript
DayPilot for ASP.NET — Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC — Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java — Calendar/Scheduling Control for Java

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Источник