Event Calendar
Dependencies
jQuery, CLNDR and Moment.js are required, the default calendar template provided by the component uses Underscore.js but other templating options are available (see CLNDR documentation).
Installation
Install via NPM.
npm install pulsar-event-calendar --save
Tests
Run the test suite to check expected functionality.
npm test
Generate a code coverage report, which can be viewed by opening /coverage/lcov-report/index.html
npm run coverage
HTML
The Event Calendar requires an element with the .js-event-calendar
class to be present in the DOM.
JavaScript
You will need to initialise the Event Calendar from a file within your Browserify bundle.
const $ = ;const EventCalendar = ; ;
Styles
Include the Event Calendar styles into your existing Sass bundle.
Usage
Start date as an init() option (optional)
The initial date which will be selected within the calendar can be passed as an initialisation option.
;
If no start date is supplied, or the value is null
, the calendar will default to today
.
;
Locale
The day of the week in which the calendar starts can be defined by the locale
setting.
United Kingdom en-GB
and Australia en-AU
locales will start the week on Monday.
United States en-US
will start the week on Sunday.
;
Start date field
You can allow the user to choose and change the start date by providing a date field within the user interface. Change events will be bound to this field.
Event date
;
The following behaviour will be observed:
- If
startDateField
has a value, this will be used as the start date - If
startDateField
does not have a value, andstartDate
is provided, this will populate the value forstartDateField
- If
startDateField
has no value, andstartDate
is not provided, the calendar will default totoday
When you choose a start date, the end date field (if supplied) will be constrained to prevent the user from choosing an end date that occurs before the start date.
Selected events
To automatically populate a list of already selected events you can pass an array of dates formatted as YYYY-MM-DD
.
;
Adding exceptions
You can pass in an array of exceptions to define which dates should be included in, or excluded from your recurrence pattern.
;
End Date as an init() option (optional)
The Event Calendar can be constrained to not allow the user to navigate past a certain date. This defaults to today + 15 years
.
Pass a Moment compatible date (like YYYY-MM-DD
) as the endDate
option.
;
End date field
You can allow the user to choose and change the end date by providing a date field within the user interface. Change events will be bound to this field.
This field should be hidden on page load, and will be shown if the user chooses a repeat pattern.
End repeat on
;
The following behaviour will be observed:
- If the
endDateField
has a value, this will be used as the end date - If the
endDateField
does not have a value, andendDate
is provided, this will populate the value forendDateField
- If the
endDateField
has no value, andendDate
is not provided, the calendar will default tostartDate + 15 years
When you choose an end date, the start date field (if supplied) will be constrained to prevent the user from choosing a start date that occurs after the end date.
Repeat pattern
An event can be set to reoccur on specific dates based on a repeat pattern, these patterns will be based on the startDate
if defined (or the current day if it isn't).
Option | Value |
---|---|
No repeat | no-repeat |
Daily | daily |
Weekly | weekly |
Every two weeks | two-weekly |
Monthly, on this day of the month | monthly-day |
Monthly, on this date | monthly-date |
Every year | annually |
Event Calendar will look for a select field with the js-ercal-repeat
class and update the calendar when the value of this field changes.
Daily
Will create a recur pattern covering all dates between the startDate
and the endDate
.
Repeat No repeat Daily Weekly Every two weeks Monthly, on this day of the month Monthly, on this date Every year
Weekly
Will create a pattern covering all dates occurring on the same weekday as the startDate. It will also show the weekday picker allowing the user to add additional weekdays.
Every two weeks
Will create a pattern covering all dates occurring on the same day of the week in two-weekly intervals.
Monthly, on this day of the month
Will create a pattern covering all dates occurring on the same day of the month (e.g. the first Thursday).
Montly, on this date
Will create a pattern covering all dates occurring on the same date of the month (e.g. The 10th of the month).
Every year
Will create a pattern covering all dates occurring on the same date each year.
Weekday choice
The weekly
option can allow the user to choose which days of the week the event should occur. Event Calendar will look for a .js-ercal-weekdays
element containing checkboxes for each weekday, which require the name="ercal-weekdays"
attribute.
This set of fields will be hidden until the weekday
option is chosen.
Repeat on MO TU WE TH FR SA SU
Saving the data
As the user interacts with the calendar they will either add new dates to the list of upcoming occurences, or dates that should be removed from the list of upcoming occurences.
The following data structures hold the date information which will need to be saved.
Recur pattern
clndr.recurPattern
The recur pattern defines which dates should be added, because the pattern can potentially select thousands of dates we don't store a list of dates this pattern will hit for performance reasons. Those can be calculated by applying the recur pattern to the startDate
.
The getRecurPattern() getter will return the current recur pattern object.
Dates to add
clndr.options.extras.datesToAdd
An array of Moment objects referencing specific dates which the event should recur on, these are based on user-choice rather than the recur pattern.
The getDates() getter will return both the datesToAdd
and datesToDel
arrays.
Dates to delete
clndr.options.extras.datesToDel
An array of Moment objects referencing dates which already exist in the calendar (defined by the Selected Events) but which the user would like to remove from the list of selected events.
The getDates() getter will return both the datesToAdd
and datesToDel
arrays.