Press "Enter" to skip to content

Fully Responsive and Compatible With All Modern Browsers JavaScript Calendar Library

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *