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.
If you have a large number of events within DateSnap Base, you can filter down the number of stacks presented in edit mode with the filter tool. Filter based on the BEGINNING of the event title.
- 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.
- 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 View
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
- 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.
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.
As a calendar product, DateSnap allows for a virtually limitless array of formatting and displaying datea and time information. DateSnap uses the FullCalendar nomenclature for formatting. From: http://arshaw.com/fullcalendar/docs/utilities/for... :
- s - seconds
- ss - seconds, 2 digits
- m - minutes
- mm - minutes, 2 digits
- h - hours, 12-hour format
- hh - hours, 12-hour format, 2 digits
- H - hours, 24-hour format
- HH - hours, 24-hour format, 2 digits
- d - date number
- dd - date number, 2 digits
- ddd - date name, short
- dddd - date name, full
- M - month number
- MM - month number, 2 digits
- MMM - month name, short
- MMMM - month name, full
- yy - year, 2 digits
- yyyy - year, 4 digits
- t - 'a' or 'p'
- tt - 'am' or 'pm'
- T - 'A' or 'P'
- TT - 'AM' or 'PM'
- u - ISO8601 format
- S - 'st', 'nd', 'rd', 'th' for the date
- W - the ISO8601 week number
Header text defines the links and label in the calendar's header (the text fields immediately above the calendar). From: http://arshaw.com/fullcalendar/docs/display/header
- 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
Specifying an empty string for a property will cause it display no text/buttons.
- Header (Left)
Left side of header (by default: prev,today,next)
- Header (Center)
Center area of header (by default: title)
- Header (Right)
Right side of header (by default: month,agendaWeek,agendaDay)
Text options allow you to modify or localize various text strings used within the calendar. Each of the 10 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.
- Time Zone:
- Manual Entry
Manual entry allows you to enter a brief date and time string in the Start and End Date entries. Alternately, you can disable manual entry and use the detailed date/time pickers (easier, but a bit slower to use).
- Start Date
Enter details about the beginning date/time of your event like this:
Month Day, Year Time AM/PM
Example: Nov 20, 2013 5:00 PM
This input method works only with English month abbreviations.
- End Date
Enter details about the ending date/time for the event, format just as the Start Date above.
- All Day
If you wish to block off entire dates (24 hour periods midnight to midnight) for an event, enable this checkbox
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.
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."
- Google Calendar
- 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.
- Source URL
The URL (address) to your Google Calendar feed or .ics file.
To obtain your Calendar's ID please read this article.
iCloud Calendar URL:
- Paste in the URL obtained from the Calendar's Sharing settings. (see iCloud Calendar above)
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.