Calendar.js is a responsive JavaScript calendar library that is fully compatible with all modern browsers and allows you to view and manage events in a responsive calendar interface.
Features include:
- Add, update, and remove events, with support for fully customizable colors.
- The full API is available via public posts.
- Drag and drop events.
- Configurable text for subtitles.
- Views of the day, week, month, and all events.
- Designed entirely in CSS / SASS (including buttons).
- Custom actions events (add / update / remove events, skip months, etc.).
- Export to CSV, XML, JSON, and TEXT.
- Full-screen mode (double-clicking on the title bar).
- Search support.
- Repeat every day, week, month, or year (with exclusion days supported).
How to make use of it:
1. Add the stylesheet calendarjs.css and JavaScript calendarjs.js to the web page.
<link rel="stylesheet" href="src/calendarjs.css" /> <script src="src/calendarjs.js"></script>
2. Create a container to hold the event calendar.
<div id="myCalendar"> </div>
3. Create a brand new instance of the event calendar.
// calendarJs(id, options, startDateTime) var calendarInstance = new calendarJs( "myCalendar", { // options here }),
4. Add your individual events to the calendar.
var events = [ { from: previousDay, to: previousDay, title: "Previous Day", description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.", location: "Teams Meeting", isAllDayEvent: true, color: "#FF0000", colorText: "#FFFF00", colorBorder: "#00FF00" }, // more events here ];
calendarInstance.addEvents(events);
5. Export the events when wanted.
<button onclick="calendarInstance.exportAllEvents( 'csv' );">Export All Events (csv)</button> <button onclick="calendarInstance.exportAllEvents( 'xml' );">Export All Events (xml)</button> <button onclick="calendarInstance.exportAllEvents( 'json' );">Export All Events (json)</button> <button onclick="calendarInstance.exportAllEvents( 'text' );">Export All Events (text)</button>
6. All out there choices to customize the choices.
var calendarInstance = new calendarJs( "myCalendar", { exportEventsEnabled: true, manualEditingEnabled: true, showTimesInMainCalendarEvents: false, minimumDayHeight: 0 })
7. Public strategies.
// previous month calendarInstance.moveToPreviousMonth(); // next month calendarInstance.moveToNextMonth(); // today calendarInstance.moveToToday(); // export all events calendarInstance.exportAllEvents(type); // refresh calendarInstance.refresh(); // remove an event removeEvent(id, updateEvents, triggerEvent); // clear all events calendarInstance.clearEvents(updateEvents); // update event calendarInstance.updateEvent(id, event, updateEvents, triggerEvent); // update options calendarInstance.setOptions(options);
Feature-rich Event Calendar, Calendar.js Plugin/Github
See Demo And Download
Official Website(williamtroup): Click Here
This superior jQuery/javascript plugin is developed by williamtroup. For extra Advanced Usages, please go to the official website.
Be First to Comment