Feature-rich Event Calendar In JavaScript – Calendar.js

Category: Date & Time , Javascript , Recommended | May 23, 2021
Author: williamtroup
Views Total: 600 views
Official Page: Go to website
Last Update: May 23, 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
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 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:

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:


Leave a Reply