Feature-rich Event Calendar In JavaScript – Calendar.js

Category: Date & Time , Javascript , Recommended | March 31, 2021
Author: williamtroup
Views Total: 192 views
Official Page: Go to website
Last Update: March 31, 2021
License: MIT

Preview:

Feature-rich Event Calendar In JavaScript –  Calendar.js

Description:

A full-featured event calendar JavaScript library that allows you to view and manage events (like scheduled tasks, appointments) in a responsive calendar interface.

Features:

  • Add/remove events.
  • Edit events in a popup window.
  • Draggable events.
  • Export events to JSON/TXT/XML/CSV/iCal files.
  • Keyboard accessibility.

How to use it:

1. Add the stylesheet calendarjs.css and JavaScript calendarjs.js to the 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 new instance of the event calendar.

// calendarJs(id, options, startDateTime)
var calendarInstance = new calendarJs( "myCalendar", { 
    // options here
}),

4. Add your own events to the calendar.

  • id: The ID of for the event.
  • title: The title of the event.
  • from: The date that the event occurs from.
  • to: The date that the event runs until.
  • description: The description of the event.
  • location: The location of the event.
  • color: The color that should be used for the event (overrides all others).
  • colorText: The color that should be used for the event text (overrides all others).
  • colorBorder: The color that should be used for the event border (overrides all others).
  • isAllDay: If this is an all day event.
  • repeatEver: How often the event should repeat (0 = Never, 1 = Every Day, 2 = Every Week, 3 = Every Month, 4 = Every Year).
  • repeatEveryExcludeDays: The days that should be excluded when an event is repeated.
  • seriesIgnoreDates: the dates (string format) that should be ignored when an event is repeated.
  • created: The date that the event was created.
  • organizerName: The name of the organizer.
  • organizerEmailAddress: The email address of the organizer.
  • repeatEnds: The date when a repeating series should end.
  • group: The name of the group the event belongs to.
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 needed.

<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 available options to customize the options.

  • previousMonthTooltipText: The tooltip text that should be used for the “Previous Month” button.
  • nextMonthTooltipText: The tooltip text that should be used for the “Next Month” button.
  • previousDayTooltipText: The tooltip text that should be used for for the “Previous Day” button.
  • nextDayTooltipText: The tooltip text that should be used for for the “Next Day” button.
  • previousWeekTooltipText: The tooltip text that should be used for for the “Previous Week” button.
  • nextWeekTooltipText: The tooltip text that should be used for for the “Next Week” button.
  • addEventTooltipText: The tooltip text that should be used for the “Add Event” button.
  • closeTooltipText: The tooltip text that should be used for the “Close” button.
  • exportEventsTooltipText: The tooltip text that should be used for the “Export Events” button.
  • listAllEventsTooltipText: The tooltip text that should be used for the “View All Events” button.
  • listWeekEventsTooltipText: The tooltip text that should be used for the “View Current Week Events” button.
  • todayTooltipText: The tooltip text that should be used for the “Today” button.
  • refreshTooltipText: The tooltip text that should be used for the “Refresh” button.
  • searchTooltipText: The tooltip text that should be used for the “Search” button.
  • expandDayTooltipText: The tooltip text that should be used for the “Expand Day” button.
  • dayHeaderNames: The names to use for the day headers (defaults to ‘[ “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa”, “Su” ]’).
  • dayNames: The full names (defaults to ‘[ “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday” ]’).
  • fromText: The text that should be displayed for the “From:” label.
  • toText: : The text that should be displayed for the “To:” label.
  • isAllDayEventText: The text that should be displayed for the “Is All Day Event” label.
  • titleText: The text that should be displayed for the “Title:” label.
  • descriptionText: The text that should be displayed for the “Description:” label.
  • locationText: The text that should be displayed for the “Location:” label.
  • addText: The text that should be displayed for the “Add” button.
  • updatedText: The text that should be displayed for the “Update” button.
  • cancelText: The text that should be displayed for the “Cancel” button.
  • removeEventText: The text that should be displayed for the “Remove Event” button.
  • addEventTitle: The title bar text that is shown for the “Add Event” label.
  • editEventTitle: The title bar text that is shown for the “Edit Event” label.
  • monthNames: The names to use for months (defaults to ‘[ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]’).
  • showDayNumberOrdinals: Indicates if the day ordinal values should be shown (defaults to true).
  • dragAndDropForEventsEnabled Indicates if dragging and dropping events around the days of the month is enabled (defaults to true).
  • exportStartFilename: The starting filename that should be used when exporting all the calendar events (defaults to “exported_events_”).
  • fromTimeErrorMessage: The error message shown for the “Please select a valid ‘From’ time.” label.
  • toTimeErrorMessage: The error message shown for the “Please select a valid ‘To’ time.” label.
  • toSmallerThanFromErrorMessage: The error message shown for the “Please select a ‘To’ date that is larger than the ‘From’ date.” label.
  • titleErrorMessage: The error message shown for the “Please enter a value in the ‘Title’ field (no empty space).” label.
  • stText: : The day ordinal text for “st”.
  • ndText: : The day ordinal text for “nd”.
  • rdText: : The day ordinal text for “rd”.
  • thText: : The day ordinal text for “th”.
  • fullDayViewEnabled: Indicates if viewing all the events in a full day is enabled (defaults to true).
  • maximumEventsPerDayDisplay: The maximum number of events that should be display per day in the main calendar display (defaults to 3).
  • yesText: The text that should be displayed for the “Yes” label.
  • noText: The text that should be displayed for the “No” label.
  • extraSelectableYearsAhead: The number of extra years ahead that are selectable in the drop down (defaults to 51).
  • allDayEventText: The text that should be displayed for the “All Day Event” label.
  • allEventsText: The text that should be displayed for the “All Events” label.
  • exportEventsEnabled: Indicates if exporting events is enabled (defaults to true).
  • manualEditingEnabled: Indicates if adding, editing, dragging and removing events is enabled (defaults to true).
  • showTimesInMainCalendarEvents: Indicates if the time should be shown on the main calendar view events (defaults to false).
  • startsOnText: The text that should be displayed for the “Starts on” label.
  • andFinishesOnText: The text that should be displayed for the “and finishes on” label.
  • toTimeText: The text that should be displayed for the “to” label.
  • autoRefreshTimerDelay: The amount of time to wait before each full refresh (defaults to 5000 milliseconds, 0 disables it).
  • confirmEventRemoveTitle: The title of the confirmation message shown when removing an event (defaults to “Confirm Event Removal”).
  • confirmEventRemoveMessage: The text for the confirmation message shown when removing an event (defaults to “Removing this event cannot be undone. Do you want to continue?”).
  • okText: The text that should be displayed for the “OK” button.
  • selectExportTypeTitle: The text that should be displayed for the “Select Export Type” label.
  • fullScreenModeEnabled: Indicates if double click on the main title bar activates full screen mode (defaults to true).
  • eventTooltipDelay: The amount of time to wait until an event tooltip is shown (defaults to 1000 milliseconds).
  • selectColorsText: The text that should be displayed for the “Select Colors” label.
  • backgroundColorText: The text that should be displayed for the “Background Color:” label.
  • textColorText: The text that should be displayed for the “Text Color:” label.
  • borderColorText: The text that should be displayed for the “Border Color:” label.
  • searchEventsTitle: The text that should be displayed for the “Search Events” label.
  • forText: The text that should be displayed for the “For:” label.
  • previousText: The text that should be displayed for the “Previous” button.
  • nextText: The text that should be displayed for the “Next” button.
  • matchCaseText: The text that should be displayed for the “Match Case” label.
  • minimumDayHeight: Indicates the height the main calendar days should used (defaults to 0 – auto).
  • repeatsText: The text that should be displayed for the “Repeats:” label.
  • repeatDaysToExcludeText: The text that should be displayed for the “Repeat Days To Exclude:” label.
  • seriesIgnoreDatesText: The text that should be displayed for the “Series Ignore Dates:” label.
  • repeatsNever: The text that should be displayed for the “Never” label.
  • repeatsEveryDayText: The text that should be displayed for the “Every Day” label.
  • repeatsEveryWeekText: The text that should be displayed for the “Every Week” label.
  • repeatsEveryMonthText: The text that should be displayed for the “Every Month” label.
  • repeatsEveryYearText: The text that should be displayed for the “Every Year” label.
  • selectDaysToExcludeTitle: The text that should be displayed for the “Select Days To Exclude” label.
  • moreText: The text that should be displayed for the “More” label.
  • holidays: The holidays that should be shown for specific days/months (refer to “Holiday” documentation for properties).
  • includeText: The text that should be displayed for the “Include:” label.
  • minimizedTooltipText: The tooltip text that should be used for for the “Minimize” button.
  • restoreTooltipText: The tooltip text that should be used for for the “Restore” button.
  • removeAllEventsInSeriesText: The text that should be displayed for the “Remove All Events In Series” label.
  • createdText: The text that should be displayed for the “Created:” label.
  • organizerName: The default name of the organizer (defaults to empty string).
  • organizerEmailAddress: The default email address of the organizer (defaults to empty string).
  • organizerNameText: The text that should be displayed for the “Organizer:” label.
  • organizerEmailAddressText: The text that should be displayed for the “Organizer Email:” label.
  • enableFullScreenTooltipText: Enable the tooltip text for the “Turn On Full-Screen Mode” button.
  • disableFullScreenTooltipText: Dsiable the tooltip text for the “Turn Off Full-Screen Mode” button.
  • idText: The text for the “ID:” label.
  • spacing: The space used for additional margins.
  • expandMonthTooltipText: The tooltip text for the “Expand Month” button.
  • repeatEndsText: The text for the “Repeat Ends:” label.
  • noEventsAvailableText: The text for the “No events available” label.
  • viewWeekEventsText: The text for the “View Week Events” label.
  • noEventsAvailableFullText: The text for the “There are no events available to view.” label.
  • clickText: The text for the “Click” label.
  • hereText: The text for the “here” label.
  • toAddANewEventText: The text for the “to add a new event.” label.
  • showAllDayEventDetailsInFullDayView: Determine if the extra details for an All Day event should be shown in the Full Day view (defaults to false).
  • showWeekNumbersInTitles: Determine if week numbers should be shown in the title bars (defaults to false).
  • weekText: The text for the “Week” label.
  • groupText: The text displayed for the “Group:” label.
  • configurationTooltipText: The tooltip text for for the “Configuration” button.
  • configurationTitleText: The text for the “Configuration” label.
  • visibleGroupsText: The text for the “Visible Groups:” label.
  • showTimelineArrowOnFullDayView: Determines if the timeline arrow should be shown in the full day view (defaults to true).
  • maximumEventTitleLength: Specifies the maximum length allowed for an event title (defaults to 0 to allow any size).
  • maximumEventDescriptionLength: Specifies the maximum length allowed for an event description (defaults to 0 to allow any size).
  • maximumEventLocationLength: Specifies the maximum length allowed for an event location (defaults to 0 to allow any size).
  • maximumEventGroupLength: Specifies the maximum length allowed for an event group (defaults to 0 to allow any size).
  • eventNotificationsEnabled: Determines if notifications should be shown for events (defaults to false).
  • eventNotificationTitle: The text for the notification title (defaults to “Calendar.js”).
  • eventNotificationBody: The text for the notification body (defaults to “The event ‘{0}’ has started.”).
var calendarInstance = new calendarJs( "myCalendar", { 
    exportEventsEnabled: true, 
    manualEditingEnabled: true, 
    showTimesInMainCalendarEvents: false,
    minimumDayHeight: 0
})

7. Available events.

  • onPreviousMonth: triggered when the “Previous Month” button is pressed.
  • onNextMonth: triggered when the “Next Month” button is pressed.
  • onPreviousYear: triggered when moving to the previous year.
  • onNextYear: triggered when moving to the next year.
  • onToday: triggered when the “Today” button is pressed.
  • onEventAdded: triggered when an event is added (passes the event to the function).
  • onEventUpdated: triggered when an event is updated (passes the event to the function).
  • onEventRemoved: triggered when an event is removed (passes the event to the function).
  • onEventsAdded: triggered when events are added (passes the events to the function).
  • onEventsCleared: triggered when the events are cleared.
  • onEventsExported: triggered when the “Export Events” button is pressed.
  • onSetMonth: triggered when the date on the main display is set externally.
  • onEventsSet: triggered when events are set and the originals are cleared (passes the events to the function)

8. Public methods.

// previous month
calendarInstance.moveToPreviousMonth();

// next month
calendarInstance.moveToNextMonth();

// previous year
calendarInstance.moveToPreviousYear();

// next year
calendarInstance.moveToNextYear();

// today
calendarInstance.moveToToday();

// get the current date
calendarInstance.getCurrentDisplayDate();

// set the current date
calendarInstance.setCurrentDisplayDate(date);

// export all events
calendarInstance.exportAllEvents(type);

// refresh
calendarInstance.refresh();

// enable fullscreen 
calendarInstance.turnOnFullScreen();

// exit fullscreen 
calendarInstance.turnOffFullScreen();

// start the auto-refresh timer
calendarInstance.startTheAutoRefreshTimer();

// stop the auto-refresh timer
calendarInstance.stopTheAutoRefreshTimer();

// remove an event
removeEvent(id, updateEvents, triggerEvent);

// get events
calendarInstance.getEvents();

// get an event
calendarInstance.getEvent(id):

// clear all events
calendarInstance.clearEvents(updateEvents);

// update event
calendarInstance.updateEvent(id, event, updateEvents, triggerEvent);

// update options
calendarInstance.setOptions(options);

// set the events and clears any existing ones
calendarInstance.setEvents(events, updateEvents, triggerEvent);

// add an array of new events
calendarInstance.addEvents(events, updateEvents, triggerEvent);

// add a new event
calendarInstance.addEvent(event, updateEvents, triggerEvent);

Changelog:

v0.9.0 (03/31/2021)

  • Fixed a fault that prevented all-day events from being exported from the Full Day view.
  • Added grouping support for events (a new property called “group”).
  • Added a new configuration dialog, which can be used to control the visible groups (at this time).
  • Added a timeline arrow that is shown in the Full Day view when the viewable date is the current date (optional, on by default).
  • Removed the options “startsOnText” and “andFinishesOnText” as the text displays for times are now shorter.
  • Decreased the height of the hours shown in the Full Day view to allow more events to be shown.
  • Fixed a fault that caused an error when opening the Year drop-down menu when the current year is not available in the list.
  • Fixed a fault that allowed the padding on the Years drop-down menu to be overridden.
  • Added new options to set the maximum length allowed for event fields (each default to zero, which allows any length)
  • Week numbers are now calculated more accurately for the title bar text.
  • Added browser notification support for events (modern browsers only, while clicking one will open the Event Editor dialog).

v0.8.2 (03/24/2021)

  • Details for an All-Day event are now hidden in the Full Day view (can be turned on using “showAllDayEventDetailsInFullDayView”).
  • Added new option “showWeekNumbersInTitles”, which will display the week numbers where applicable (off by default).
  • Increased the maximum responsive width so that the default text/icons do not overlap.
  • Weekend days in the Weekly view now show the same background colour as the days on the main display.
  • Fixed a fault that caused the drag & drop hover effects to activate for objects not dragged in the calendar.
  • Dragging an event that repeats (or spans multiple days) takes the day it was dragged from into account (drops more accurately).
  • On the Search dialog, the “Title” option is now checked by default.
  • Fixed a huge bug that caused events to change dates when searching.
  • When searching, the events that are found are now focused and show a pulsing effect on the main display.

v0.8.1 (03/21/2021)

  • Added public function “setEvents()”, which adds an array of events and clears the original (fires onEventsSet, if available).
  • The option “autoRefreshTimerDelay” now defaults to 30000 milliseconds.
  • When the month on display is the current month/year, the auto-refresh will now jump to the right date when the day changes.
  • Added icons to the context menu shown for days on the main display.
  • Fixed a fault that allowed HTML to be inserted into text displays (allowing script injection).
  • Fixed a fault that caused the Export Events button to always be visible on the List All Events view.
  • Fixed a padding fault on the Full Day view (now defaults to 0 to prevent display issues).
  • When events are not available in the views, a new centred message is now shown (instead of whitespace).
  • Fixed a fault that prevented the opened view from updating when calling one of the public functions.

v0.8.0 (03/18/2021)

  • Calling “setOptions()” now only sets the ones you have passed (no longer reverts the others to their defaults).
  • Renamed the “Select Days To Exclude” dialog to “Repeat Options” (renames settings and CSS classes to match).
  • Exported data now shows the days to exclude (for repeating events) as actual day names, instead of numbers.
  • Fixed a fault that caused the incorrect dates to be used when showing a Full Day or Full Week (after skipping days/weeks).
  • Fixed the context menu not working on the Full Day view events.
  • Fixed a fault that prevented events from being removed when the checkbox is not available on the confirmation message.
  • Fixed the extra toolbar buttons on the extra views not hiding when used on a smaller screen (as with the main display).
  • Added support to expand a day into a Full Day view from the Weekly view.
  • Added support to expand a month into the main display from the All Events view.
  • The Full Day view now shows the events against a time view instead of a list (sorry for the delay in this).
  • Added support to state when repeating events should end (defaults to never).
  • If the Search dialog is minimized and the search button is pressed again, it is now restored.
  • Fixed a fault that caused events not to appear in the main display when “maximumEventsPerDayDisplay” is set to zero.
  • The “1+ More” text shown in the main display for days can now be clicked to expand the full day.
  • Fixed a fault that caused the setting “dragAndDropForEventsEnabled” to be ignored.
  • Added drag & drop support within the weekly view (same as the main display).
  • The weekly view now shows all the days available, enabling better drag & drop support (new text setting available).
  • Improved some of the default text for the drop-down menus (via new settings).

v0.7.0 (03/15/2021)

  • Added Turn On/Off full-screen mode buttons to the toolbars (in any view).
  • Fixed the CSS class “ib-plus” being available twice in the master CSS file.
  • Fixed full-screen mode appearing odd when used on a very small display (iPhone SE, Galaxy Fold, etc).
  • The calendar now has a minimum width of 260px.
  • Added public functions “turnOnFullScreen()” and “turnOffFullScreen()”.
  • Added public function “getEvents()”, which returns all the events in an ordered array.
  • Added public function “getEvent()”, which returns the event details found for an event ID.
  • Fixed the ID data being missing from the exported CSV data (it is now the first column shown).
  • Added public functions “startTheAutoRefreshTimer()” and “stopTheAutoRefreshTimer()”.
  • Added public function “getCurrentDisplayDate()”, which returns the current date being used in the main display.
  • The current date is now always set to the beginning of the day and the 1st day of the month.
  • Added public function “setCurrentDisplayDate()”, which will set the main display date (fires “onSetDate”, if available).
  • Changed the mime type for exported JSON to application/json.
  • Added FUNCTIONS.md documentation and fixed internal JS documentation for public functions.

v0.6.1/2 (03/13/2021)

  • Updates to documentation.

v0.6.0 (03/13/2021)

  • Added support to remove an event from a repeating series (asked in the confirmation message).
  • Holidays (Christmas Eve, Christmas Day, Boxing Day, New Year’s Eve, and New Year’s Day) are now the default holidays.
  • Added navigation key support when full-screen mode is activate.
  • Added “created” support to events (set automatically if not available to the current date/time).
  • Added “organizerName” support to events (set automatically if not available to options > organizerName).
  • Added “organizerEmailAddress” support to events (set automatically if not available to options > organizerEmailAddress).
  • Added support to export events to the iCAL format.
  • Fixed events being in the wrong order when exported (to any format).
  • Added public methods “moveToPreviousYear()” and “moveToNextYear()” (with new “on” events).

v0.5.2 (03/11/2021)

  • The text “All Day Event” is now “All-Day” (renamed all the settings to match).
  • Fixed a fault that allowed text to be selected in a disabled text field (date, time).
  • Added “grid-border-color” that states the border color of the internal grid borders (which is now a lighter gray).
  • The day name headers now use 3 letters for the short names by default.
  • Added holiday support (shown under day numbers and in the Full Day title bar) as a new option called “holidays”.
  • Transition effects are no longer shown when the Event Editor is opened (stops things jumping around).
  • Fixed a fault that prevented the Search dialog from rebuilding when setting new options.
  • Fixed a fault that caused the dialogs to become unresponsive when the main display is rebuilt.
  • Fixed a script error occurring when nothing is found in the Search dialog.
  • Added include “Title”, “Description” and “Location” searching support in the Search dialog.
  • Added support to minimize and restore the Search dialog (new button on the toolbar).
  • Fixed a fault that caused the Search dialog to redraw every time the search button is pressed on the main toolbar.

v0.5.1a (03/09/2021)

  • Fixed exports (all except CSV) being broken.
  • Fixed missing properties on CSV exports.
  • Fixed weekly events not showing up in Internet Explorer.

You Might Be Interested In:


Leave a Reply