DateSnap 2 stack
This Stack Element must be on all pages that will contain a DateSnap calendar. DateSnap Base defines the calendar's properties (style, color, language, etc). To add event data to a calendar, DateSnap Event or DateSnap Event Source are placed inside DateSnap Base.
Before to Start
We do not recommend using DateSnap more than once on a single web page. This is especially true when using iCloud Event Source(s). Please do not do this.
- Right to Left
Enable to render the calendar with dates sorted right-to-left (ie, Hebrew Style)
- Show Weekends
When enabled, both Saturday and Sunday will be displayed on the calendar.
- Show Week Numbers
If checked, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views.
- First Day
Select the day that should be presented as the first day of the week (left most day of the week in standard left to right view).
- Default Desktop
Visitors can change the calendar view, but this setting defines the default calendar view.
(default) A full month's view
- Basic Week
A simple weekly calendar
- Basic Day
A simple daily calendar
- Agenda Week
A more detailed weekly grid calendar, includes hour labels
- Agenda Day
A more detailed hourly grid calendar, includes hour labels
- List Day
List Style View of Day's Events.
- List Week
List Style View of Week's Events.
- List Month
List Style View of Months's Events.
- List Year
List Style View of Year's Events.
- Default Mobile
Defines the default calendar view on mobile devices. The same views listed above can be used here as well.
- Set Initial Date
Define the date and year to be displayed on page load. If no Initial Date is defined, the current month and year will be displayed.
- Initial Month
Month the calendar will display first time page is loaded.
- Initial Year
Year the calendar will display first time page is loaded.
- Initial Month
DateSnap includes 40+ Languages. Updating the language setting will translate the text utilized for month and day names. Additional localization is available in the TEXT settings within DateSnap Base.
Timezone information for your events and you want them displayed in a timezone that can be customized.
- Event Limit
Limits the number of events displayed on a day. When there are too many events, a link that looks like "+2 more" is displayed.
- Event Limit Click
Determines the action taken when the user clicks on a "more" link. Week goes to a week view. Day goes to a day view
As a calendar product, DateSnap allows for a virtually limitless array of formatting and displaying datea and time information. DateSnap uses moment.js for formatting. Click here to read full option list.
|Month||M||1 2 ... 11 12|
|Mo||1st 2nd ... 11th 12th|
|MM||01 02 ... 11 12|
|MMM||Jan Feb ... Nov Dec|
|MMMM||January February ... November December|
|Quarter||Q||1 2 3 4|
|Qo||1st 2nd 3rd 4th|
|Day of Month||D||1 2 ... 30 31|
|Do||1st 2nd ... 30th 31st|
|DD||01 02 ... 30 31|
|Day of Year||DDD||1 2 ... 364 365|
|DDDo||1st 2nd ... 364th 365th|
|DDDD||001 002 ... 364 365|
|Day of Week||d||0 1 ... 5 6|
|do||0th 1st ... 5th 6th|
|dd||Su Mo ... Fr Sa|
|ddd||Sun Mon ... Fri Sat|
|dddd||Sunday Monday ... Friday Saturday|
|Day of Week (Locale)||e||0 1 ... 5 6|
|Day of Week (ISO)||E||1 2 ... 6 7|
|Week of Year||w||1 2 ... 52 53|
|wo||1st 2nd ... 52nd 53rd|
|ww||01 02 ... 52 53|
|Week of Year (ISO)||W||1 2 ... 52 53|
|Wo||1st 2nd ... 52nd 53rd|
|WW||01 02 ... 52 53|
|Year||YY||70 71 ... 29 30|
|YYYY||1970 1971 ... 2029 2030|
|Y||1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
|Week Year||gg||70 71 ... 29 30|
|gggg||1970 1971 ... 2029 2030|
|Week Year (ISO)||GG||70 71 ... 29 30|
|GGGG||1970 1971 ... 2029 2030|
|Hour||H||0 1 ... 22 23|
|HH||00 01 ... 22 23|
|h||1 2 ... 11 12|
|hh||01 02 ... 11 12|
|k||1 2 ... 23 24|
|kk||01 02 ... 23 24|
|Minute||m||0 1 ... 58 59|
|mm||00 01 ... 58 59|
|Second||s||0 1 ... 58 59|
|ss||00 01 ... 58 59|
|Fractional Second||S||0 1 ... 8 9|
|SS||00 01 ... 98 99|
|SSS||000 001 ... 998 999|
|SSSS ... SSSSSSSSS||000[0..] 001[0..] ... 998[0..] 999[0..]|
|Time zone||z or zz||EST CST ... MST PST
Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon.
|Z||-07:00 -06:00 ... +06:00 +07:00|
|ZZ||-0700 -0600 ... +0600 +0700|
|Unix Millisecond Timestamp||x||1360013296123|
Header text defines the links and label in the calendar's header (the text fields immediately above the calendar).
- text containing the current month/week/day
- button for moving the calendar back one month/week/day
- button for moving the calendar forward one month/week/day
- button for moving the calendar back on year
- button for moving the calendar forward one year
- button for moving the calendar to the current month/week/day
a view name
- button that will switch the calendar to any of the available views.
- There are 9 available views:
- month, basicWeek, basicDay, agendaWeek, agendaDay, listYear, listMonth, listWeek, listDay
Specifying an empty string for a property will cause it display no text/buttons.
Left side of header.
Center area of header.
Right side of header.
- Left (Mobile)
Left side of header for mobile devices
- Center (Mobile)
Center area of header for mobile devices.
- Right (Mobile)
Right side of header for mobile devices.
Text options allow you to modify or localize various text strings used within the calendar. Each of the labels may be modified to suit your needs.
Calendar Style allows you to setup the font and size for calendar content. In addition, we've included a number of color pickers to allow you to easily modify the calendar's color scheme to match your Rapidweaver theme and site.
When modifying your color selections, you can enable preview mode to see a quick preview of the monthly calendar using your newly applied colors. Note that the preview is for color selection only and does not disiplay any text you may have customized.
When an calendar event is clicked, the modal opens and displays all event data. The settings in this section control the modal's size and color
- Full Screen
When enabled, the modal will open to the full size of the viewer's browser window. When disabled, you can specify your own exact modal height and width using the size sliders.
- Color Pickers
Click the color pickers to choose colors for the modal's background and title text
When hovering over an event, the Popover is displayed. The Popover displays summary information such as event title, begin time and end time.
- Color Pickers
Click the color pickers to choose colors that define the Popover's appearance.
DateSnap supports two basic methods of populating the calendar with event data. The first option is manual event entry accomplished by adding an instance of DateSnap Event to DateSnap Base for EACH calendar event. Setting up manual events is very easy, you also have the advantage of being able to place additional content and stacks INSIDE the event stack which can provide further details such as a map or images related to the event.
The title of the event - this will be displayed on the calendar.
If you wish to supply information about the event's location, add that here.
If you have a website or page with further information about the event, you can supply the URL here and it will be presented as a clickable link in the event details.
- Start Date
The date / time when your event starts.
- End Date
The date / time when your event ends.
- All Day
If you wish to block off entire dates (24 hour periods midnight to midnight) for an event, enable this checkbox
- Show Image
Include a thumbnail image in the hover popover of the event.
You can assign different colors to different events. Use the color picker to select a a color to be applied to THIS event on the calendar.
Events now have a place to specify a thumbnail image that will be displayed in the event popover.
Drag other stacks here to build out your events's description. Do everyone a favor and keep this simple. Best practice would be to use Text, HTML or Markdown stacks here.
DateSnap Event Source
In addition to manual event entry you can use the DateSnap Event Source stack to provide access information for a Google Calendar or aed exported .ics from your Mac's Calendar app.
DateSnap Event Source:
The title of this stack in edit mode - you can simply use the title to differentiate your feed names on the stacks to make managing your feeds easier. This title is only shown to you in Rapidweaver edit mode and not displayed publicly.
You can choose between two types of Calendar Feeds:
- Google Calendar
You must first make your Google Calendar public:
- In the Google Calendar interface, locate the "My Calendar" box on the left.
- Click the arrow next to the calendar you need.
- A menu will appear. Click "Share this calendar."
- Check "Make this calendar public."
- Make sure "Share only my free/busy information" is unchecked.
- Click "Save."
- iCloud Calendar
- In Calendar app, select the calendar you'd like to export (left hand column of the app)
- Right Click the calendar name and choose to Share This Calendar
- Enable the Public checkbox. This will display a webcal:// URL. Copy this URL as you'll need to provide it within the Event Source stack URL field.
- Google Calendar
- Source URL (used with iCloud Calendar )
The URL (address) to your .ics webcal file.
- Calendar ID (used with Google Calendar )
- Timezone The desired timezone of the returned events.
You can assign different colors to different feeds. Use the color picker to select a a color to be applied to all events provided by this feed.