Updated April 7, 2023
Introduction to jQuery Calendar with Events
The jQuery calendar with events is used to show events on the website. The calendar with events can be performed with the help of available jQuery plugins. The jQuery plugin is simply a new function used to extend the jQuery prototype object. All jQuery objects inherit all the added functions by extending the prototype object. So the plugin is used to extend the functionality of the calendar object or element. Many plugins are available, which helps the developer create an attractive calendar with events for web applications.
Different jQuery Calendar with Events
Given below are the different jQuery Calendar with Events:
- tui.calender: The tui.calendar is a feature-rich calendar library that can be used to display custom activities, schedules, and tasks in regular, weekly, and monthly views.
- FullCalendar: This FullCalendar is a lightweight but powerful JavaScript library for creating customizable, draggable event calendars on modern web apps, which is very developer-friendly.
- Simple calendar: This is an easy, lightweight, interactive, animated event calendar plugin that displays event information in a popup when you select a date slot.
- evo-calendar: This plugin provides flexible event calendar creation that uses a sensitive, modern-looking calendar interface to view events.
- calendarJS: This is a jQuery plugin used in the latest Bootstrap 4 framework that allows you to build a simple, sensitive calendar part.
- vanilla-calendar: This jQuery plugin allow to filter dates, enable/disable past dates, set available dates/weekdays, and more. It is a simple, lightweight JavaScript inline calendar.
- pbcalendar: It is a lightweight plugin that allows you to view a monthly calendar on your website and dynamically schedule events on specific dates.
Example of jQuery Calendar with Event Plugin
Given below is the example mentioned:
Example of the jQuery calendar with event plugin by using the tui.calender plugin.
The steps to use the tui.calender plugin are as follow:
- First, download the tui.calender plugin and unzip it. The unzip folder contains the files and folders.
- Next, start the creating of our web page that is html file in the example folder.
Code:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> This is an example for jQuery calendar with event plugin </title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "../dist/tui-calendar.css">
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">
<link rel = "stylesheet" type = "text/css" href = "./css/icons.css">
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
<link rel = "stylesheet" type = "text/css" href = "./css/default.css">
</head>
<body>
<h3> This is an example for jQuery calendar with event plugin </h3>
<div id = "lnb">
<div class = "lnb-new-schedule">
<button id = "btn-new-schedule" type = "button" class = "btn btn-default btn-block lnb-new-schedule-btn" data-toggle = "modal">
create schedule</button>
</div>
<div id = "lnb-calendars" class = "lnb-calendars">
<div>
<div class = "lnb-calendars-item">
<label>
<input class = "tui-full-calendar-checkbox-square" type = "checkbox" value = "all" checked>
<span></span>
<strong> View all </strong>
</label>
</div>
</div>
<div id = "calendarList" class = "lnb-calendars-d1">
</div>
</div>
<div class = "lnb-footer">
© NHN Corp.
</div>
</div>
<div id = "right">
<div id = "menu">
<span class = "dropdown">
<button id = "dropdownMenu-calendarType" class = "btn btn-default btn-sm dropdown-toggle" type = "button" data-toggle = "dropdown"
aria-haspopup = "true" aria-expanded = "true">
<i id = "calendarTypeIcon" class = "calendar-icon ic_view_month" style = "margin-right : 4px;"></i>
<span id = "calendarTypeName"> select </span>
<i class = "calendar-icon tui-full-calendar-dropdown-arrow"></i>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu-calendarType">
<li role = "presentation">
<a class = "dropdown-menu-title" role = "menuitem" data-action = "toggle-monthly">
<i class = "calendar-icon ic_view_month"> </i> Month
</a>
</li>
<li role = "presentation">
<a class = "dropdown-menu-title" role = "menuitem" data-action = "toggle-weekly">
<i class = "calendar-icon ic_view_week"> </i> Weekly
</a>
</li>
<li role="presentation">
<a class = "dropdown-menu-title" role = "menuitem" data-action = "toggle-daily">
<i class = "calendar-icon ic_view_day"> </i> Daily
</a>
</li>
<li role = "presentation">
<a class = "dropdown-menu-title" role = "menuitem" data-action = "toggle-weeks2">
<i class = "calendar-icon ic_view_week"> </i> 2 weeks
</a>
</li>
<li role = "presentation">
<a class = "dropdown-menu-title" role = "menuitem" data-action = "toggle-weeks3">
<i class = "calendar-icon ic_view_week"> </i> 3 weeks
</a>
</li>
<li role = "presentation" class = "dropdown-divider"> </li>
<li role = "presentation">
<a role = "menuitem" data-action = "toggle-workweek">
<input type = "checkbox" class = "tui-full-calendar-checkbox-square" value = "toggle-workweek" checked>
<span class = "checkbox-title"> </span> Show weekends
</a>
</li>
<li role = "presentation">
<a role = "menuitem" data-action = "toggle-start-day-1">
<input type = "checkbox" class = "tui-full-calendar-checkbox-square" value = "toggle-start-day-1">
<span class = "checkbox-title"> </span> Start Week on Monday
</a>
</li>
<li role = "presentation">
<a role = "menuitem" data-action = "toggle-narrow-weekend">
<input type = "checkbox" class = "tui-full-calendar-checkbox-square" value = "toggle-narrow-weekend">
<span class = "checkbox-title"> </span> Narrower than weekdays
</a>
</li>
</ul>
</span>
<span id = "menu-navi">
<button type = "button" class = "btn btn-default btn-sm move-today" data-action = "move-today"> Today </button>
<button type = "button" class = "btn btn-default btn-sm move-day" data-action = "move-prev">
<i class = "calendar-icon ic-arrow-line-left" data-action = "move-prev"></i>
</button>
<button type = "button" class = "btn btn-default btn-sm move-day" data-action = "move-next">
<i class = "calendar-icon ic-arrow-line-right" data-action = "move-next"></i>
</button>
</span>
<span id = "renderRange" class = "render-range"> </span>
</div>
<div id = "calendar"></div>
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src = "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src = "https://uicdn.toast.com/tui.date-picker/v4.0.3/tui-date-picker.min.js"></script>
<script src = "https://uicdn.toast.com/tui.time-picker/v2.0.3/tui-time-picker.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
<script src = "./js/data/schedules.js"></script>
<script src = "../dist/tui-calendar.js"></script>
<script src = "./js/data/calendars.js"></script>
<script src="./js/app.js"></script>
</body>
</html>Output:
In the above code, the calendar with the events is created. Next, we can create a new event, view the event in moth wise, week wise and all, as we can see in the above output.
Conclusion
They are used to extend the calendar’s functionality; there are different types of calendars with event plugins available with their specific features. These are used to create a calendar with an event to show the events to the visitors of the website.
Recommended Articles
This is a guide to jQuery Calendar with Events. Here we discuss the introduction, different jQuery calendar with events and examples. You may also have a look at the following articles to learn more –
