Feature-rich Event Calendar In JavaScript – Calendar.js

Category: Date & Time , Javascript , Recommended | August 1, 2021
Author:williamtroup
Views Total:9,587 views
Official Page:Go to website
Last Update:August 1, 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/Markdown/HTML 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.”).
  • showDayNamesInMainDisplay: Determine if the day names header should be shown in the main display
  • showPreviousNextMonthNamesInMainDisplay: Determine if the previous/next month names should be shown in the main display days
  • tooltipsEnabled: Determine if you want to enable tooltips
  • useOnlyDotEventsForMainDisplay: Determine if only dot event icons should be used in the main display
  • visibleDays: An array of day numbers that should be visible
  • allowEventScrollingOnMainDisplay: Determine if the days in the main display can be scrolled
  • urlWindowTarget: Defaults to ‘_blank’.
  • defaultEventBackgroundColor: Sets the default background color that should be used for events (defaults to “#484848”).
  • defaultEventTextColor: Sets the default text color that should be used for events (defaults to “#F5F5F5”).
  • defaultEventBorderColor: Sets the default border color that should be used for events (defaults to “#282828”).
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);
calendarInstance.updateEvents(events, updateEvents, triggerEvent):
// update options
calendarInstance.setOptions(options);
// set search options
// triggerEvent: if the "onSearchOptionsUpdated" event should be triggered
calendarInstance.setSearchOptions({
  matchCase: false,
  showAdvanced: true,
  searchTitle: true,
  searchLocation: false,
  searchDescription: false,
  searchGroup: false,
  searchUrl: false,
  startsWith: false,
  endsWith: false,
  contains: true,
}, triggerEvent);
// add new holidays
calendarInstance.addHolidays(holidays);
// 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);
// update an existing events from/to dates
calendarInstance.updateEventDateTimes();
// return an array of group names being used
calendarInstance.getAllGroups();
// clear all the event groups.
calendarInstance.clearAllGroups(updateEvents);
// destroy the instance
calendarInstance.destroy();
// returns the current version
calendarInstance.getVersion();

Changelog:

v1.2.0 (08/01/2021)

  • Added Copy and Paste support of events (events can be pasted on the main display, or Full Day view).
  • Context drop-down menu items that open dialogs now have a “…” at the end to indicate this.
  • Decreased the default padding size that is used for the drop-down context menus.
  • Added Duplicate context menu support for events (will show the details in the Event Editor dialog).
  • Added new setting “defaultEventBackgroundColor”, which states the default event background color that should be used.
  • Added new setting “defaultEventTextColor”, which states the default event text color that should be used.
  • Added new setting “defaultEventBorderColor”, which states the default event border color that should be used.
  • Added “showAlerts” property support to Events with UI support (states if browser alerts should be shown, defaults to true).
  • Added stacking of overlapping events support to the Full Day view (2 columns to start with).

v1.1.2 (07/25/2021)

  • The Full Day view no longer shows days that are hidden (the Today button is also hidden to prevent jumping to a hidden day).
  • Renamed the CSS class “current-year-selector” to “year-selected”.
  • Added support to show the years that contain events in the year’s down-down menu (new CSS class “year-has-events”).
  • Added support to search by Group and Url in the Search dialog.
  • Added a new checkbox called “Advanced” to the Search dialog, which will hide the additional search options (saves screen space).
  • When opening the Search dialog via the global key, all open overlays (Day, Weekly and All) views are closed.
  • Search options now has its own internal configuration and can be set by the new public function “setSearchOptions()”.
  • Added new event “onSearchOptionsUpdated”, which is fired every time the search options are changed (via UI or code).
  • Fixed some spelling issues in some more spelling and grammar mistakes in the existing documentation.

v1.1.1 (07/24/2021)

  • Decreased the width/height of the hour/half hour display shown on the side in the Full Day view.
  • Fixed the font size for the drop-down menus not adhering to the default font-size media rules.
  • The headers in the exported file types (except CSV/TSV/MD) are now sorted in alphabetical order.

v1.1.0 (07/23/2021)

  • When attempting to fire a browser notification, if the API is not supported, errors are no longer reported (see the console).
  • Added double-click support to the Full Day view to add new events, showing the correct time based on the area clicked.
  • Added support for custom repeat periods for events (either by Daily, Weekly, Monthly, or Yearly).
  • Fixed base documentation for the “repeatsEvery” property for events.
  • Fixed the input fields showing a hover effect when they are disabled.
  • Fixed the radio buttons showing a hover effect when they are disabled.
  • Fixed some overload SCSS issues when styling the tab content containers.
  • Added “lastUpdated” support for events (only updated if the event is actually changed).
  • Added “LAST-MODIFIED” support for iCal exports, and “lastUpdated” to all other export types.
  • Fixed some very bad spelling mistakes in the documentation.
  • The events onPreviousMonth, onNextMonth, onPreviousYear, onNextYear, and onSetDate now have the new date passed to them.
  • Added global Escape key support for open dialogs (not Confirmation Messages or Search).
  • Added global Ctrl/Command + Shift + A support to open the Add Event window (when manual editing is enabled).
  • Code changes to make the KeyCodes a little easier to read.
  • Added global Ctrl/Command + Shift + F support to open the Search dialog (instead of Ctrl/Command + F in full-screen mode).
  • Added :active CSS selector for the tab control headers (for all dialogs that use them).

v1.0.2 (07/20/2021)

  • Fixed a fault that allowed all the visible days in the Configuration window to be turned off (causing huge display issues).
  • The public function destroy() will now remove all drop-down menus and dialogs from the document body.
  • Fixed a sizing issue for overlays that caused them to be 1 pixel out (causing a slight gap).
  • Added half-hour separator lines on the Full Day view (dashed and CSS controlled).
  • Fixed a fault that prevented new events (without a group name assigned) from showing up (after saving configuration changes).
  • Fixed all export dates for content and filenames being 1 month out every time.

v1.0.1 (07/19/2021)

  • Bugfixes

v1.0.0 (07/19/2021)

  • Added context menu support to the Full Day view (allowing events to be cleared, or added).
  • Fixed a fault that prevented the event context menu from rebuilding when manual editing is re-enabled.
  • Reordered the event context menu and added new icons.
  • When using the “Remove Events” option (anywhere), it now only removes non-repeating events (confirmation text updated).
  • Array options are now checked correctly to make sure they are an array and contain the right number of items.
  • The “visibleDays” option is now taken into account when showing the Weekly view (so only visible days will show).
  • Fixed a fault that allowed events to be added in the Weekly view when manual event adding/editing is disabled.
  • Added new event “onNotificationClicked”, which is triggered when an event notification is clicked.
  • Added new option “allowEventScrollingOnMainDisplay”, which allows days in the main display to be scrolled.
  • Added new public function addHolidays, which will add new holidays and re-draw the calendar.
  • Added “Open Url” support to the event context menu (only available if a Url has been set for the event).
  • Fixed a fault that prevented the cached window object from being used to open new windows.
  • Added “Visible Days” tab to the Configuration dialog, allowing the visible days in the display to be toggled.
  • Added new option “urlWindowTarget”, which states the target for an event Url that is opened (defaults to _blank for a new window).
  • Added “Enable day name headers in the main display” option to “Display” on the Configuration dialog.
  • Added the “Today” button to the Full Day view for quickly jumping to the current date.
  • Added a “This Week” button to the Weekly view for quickly jumping to the current week.

v0.9.9 (07/15/2021)

  • Optimizations and cleanups to the core code (less repeating code, more functions, etc).
  • The context menus now open with a minor fade effect.
  • The local timezone is now determined when adding a new event, ensuring that it’s added to the right day.
  • The “Add Event” context menu item is now bold by default.
  • The “Remove Events” buttons (shown in the views) are now only shown when manual event editing is enabled.
  • The month names shown in the main display (for the previous/next month) can now be clicked to quickly jump to that month.
  • The “Expand Day” button on the main display is now only shown on larger screens (prevents overlapping).
  • The “Expand Day” button on the main display now uses a new expand button (similar to other buttons).
  • Added support to export events to the TSV (tab-separated values) file format.
  • The CSS class names used for the tabs (in the Configuration dialog) have been moved and renamed.
  • The “Add Event” dialog has been split up into separate tabs (due to the size getting too large for smaller displays).
  • Added “url” support for events (when a notification is clicked, if set, the URL will be opened in a new window).

v0.9.8a (07/12/2021)

  • Reverted date changes from 0.9.8

v0.9.8 (07/11/2021)

  • Tooltips now stay open when an event is hovered over.
  • Bugs fixed.
  • Added drop support to all views that will allow a file (containing JSON, or an array of events) to be added.
  • Added support to remove all the events on a specific day in the Weekly View (new X button on the day title bar).
  • Added support to remove all the events on a specific day in the All Events View (new X button on the day title bar).
  • The iCal property DTSTAMP has been changed to CREATED.

v0.9.7 (05/23/2021)

  • Added repeat Every 2 Weeks support (please update your events, the IDs for the others have been changed.).
  • Added “Enable drag & drop for events” option to the Configuration dialog.
  • Renamed the tabs and setting names for the Configuration dialog (smaller and better).
  • Added “Organizer” to the Configuration dialog, with support to change the name and email address.
  • When using drag & drop, the “repeatEnds” property on the event is now updated to reflect the changes.
  • Extended the function updateEventDateTimes() to allow updating the “repeatEnds” property on the event.
  • The Search dialog is now hidden whenever you which to an overlay view (weekly, all events, full-day).
  • Fixed a fault that caused the Search dialog to appear over the modal dialogs.
  • The dialog drop shadows can now be changed per dialog (the base CSS class has been removed).

v0.9.6 (05/16/2021)

  • Added new option visibleDays, which states the days that are visible
  • Fixed a fault that prevented the first event in a repeating series from being removed
  • Extended the Configuration dialog to include tabs, with a new one called Display Options
  • The Configuration dialog is now available at all times
  • Fixed a fault that prevented the Configuration dialog from using the right font and font-sizes
  • Added new event onOptionsUpdated, which is triggered when setOptions() is called and in the Configuration dialog
  • Added drag & drop support within the all-event view (same as the main display)
  • Events in the views, and the main tooltip, now show the total duration (in days, hours and minutes)
  • New translation string options added for the event duration text
  • Changed the base styles for the dialogs can now be done in calendar-dialog CSS class
  • Added a drop shadow to all the dialogs
  • The disabled background colour is now a few shades lighter
  • Fixed standard border sizes now being shared within the SCSS files

v0.9.5 (05/03/2021)

  • Fixed a fault that caused the public function addEvents() to fire the wrong event
  • Double-clicking the headers in the Week/All Events views (for a week/month) will now activate the expand button
  • Improved the “No events available” default text display in the Week view
  • An error log is now shown in the developer console when an input type is not supported by the browser
  • Added public function updateEvents(), which will update an array of existing events
  • Fixed a fault that prevented the tooltip title for an event to be cleared before being shown again
  • Fixed a fault that prevented the event found via the Search dialog from being focused when pressing Previous
  • Pressing Ctrl+Enter in the Search dialog will now move back to the previously found event
  • The “Contains” option on the Search dialog is now the default selection

v0.9.4 (05/02/2021)

  • Added support to show the events in the main display as dots (optional, to save space; defaults to false).
  • Added options “Starts With”, “Ends With” and “Contains” to the Search dialog (defaults to the first one).
  • Repeating events now show an icon in the display to indicate this (including the overlay views).
  • Removed the “For:” label from the Search dialog (with option support), as it’s not needed.
  • Fixed a fault that caused new events to be added to the wrong date when added from the Event Editor.
  • Fixed a fault that caused the wrong date to be used when setting the end of a repeating event.
  • Fixed a fault that caused the wrong dates to be used when the date picker is now compatible with the browser.
  • Faster rendering of the years drop-down menu (no longer sets classes when not required).
  • Fixed the vertical scrollbar not showing up in the group’s list on the Configuration dialog.

v0.9.3 (04/27/2021)

  • Added export to MD (markdown) file support.
  • Added export to HTML file support.
  • Added public function getVersion(), which returns the current version of Calendar.js.
  • Fixed some documentation errors for functions (return types not being shown correctly).
  • Fixed the PRODID for iCAL exports showing the wrong product data.
  • Added gregorian time format support for iCAL export type.
  • Added new option tooltipsEnabled, which allows the tooltips throughout the calendar to be disabled (on by default).
  • Fixed a fault that caused the holidays to appear within the Day number text element (now placed under it).
  • The first day of each month is now highlighted (the same style as the current day of the month).

v0.9.2 (04/23/2021)

  • Added support to show the previous/next month names in the days on the main display (optional, on by default).
  • Added a new option “showDayNamesInMainDisplay” to disable the day names header in the main display (optional, on by default).
  • Split out the documentation for strings shown in the display and fixed some of the types.
  • Added new public function destroy(), which clears and removes the calendar from the DOM.
  • The year’s drop-down menu list now fades in when shown.
  • Removed code that should be using the quick-build functions (less code).
  • Added close (X) buttons to all dialogs (except the confirmation dialog) with full tooltip support.
  • Added tooltip support to the … buttons on the Event Editor dialog (more obvious which one does what).
  • Added border hover effect to all input controls (text fields, checkboxes, radio buttons, etc).
  • Added new public function getAllGroups(), which returns all the groups.
  • Added new public function clearAllGroups(), which clears all the groups assigned to the events.
  • Added Valentine’s Day, Halloween, April Fools’ Day and Earth Day to default holidays.
  • Added a plus button to the Weekly View internal header panel for quickly adding new events.
  • Added a plus button to the All Events View internal header panel for quickly adding new events.

v0.9.1 (04/16/2021)

  • Added new public function updateEventDateTimes().
  • Drag & Drop now uses the new updateEventDateTimes() function (much faster).
  • Double-clicking on the Search dialogs title bar will now toggle its minimized state.
  • Fixed a fault that caused the event ID property to be overridden when updated in the Event Editor.

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:


6 thoughts on “Feature-rich Event Calendar In JavaScript – Calendar.js

  1. Steven

    Hello, this is an awesome tool and very well thought out. It works very well and your documentation is great. Thank you for making the tool and making it available.

    Reply
  2. FERNANDO P FARIA

    Hi There! Excelent! Is there a way to implement 3 days, 2/3 weeks display mode?

    Reply
  3. D Hill

    This is a great js event calendar! Is it possible to allow event descriptions (and other options) to contain html instead of having to be plaintext?

    Reply
  4. Marty

    Beautiful, thank you ! I am trying to replicate the Organizer in the EventEditor but for the time being without success.

    Reply
  5. Emanuel

    Is there a way to save the data in a database? Because if I reload the page I can’t find anything anymore

    Reply

Leave a Reply