DateSnap 2 Manual

Avatar
Mike
Follow

DateSnap 2 stack

DateSnap

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. 

Base:

  • 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.
    • Month
      (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.
  • Language
    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
    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

Format:

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.

  Token Output
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
AM/PM A AM PM
  a am pm
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 Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

Header

Header text defines the links and label in the calendar's header (the text fields immediately above the calendar).

title
text containing the current month/week/day
prev
button for moving the calendar back one month/week/day
next
button for moving the calendar forward one month/week/day
prevYear
button for moving the calendar back on year
nextYear
button for moving the calendar forward one year
today
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
    Left side of header.
  • Center
    Center area of header.
  • Right
    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

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

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.

Preview Mode
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.

Modal Style

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

Popover Style

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 Event

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.

DateSnap Event:

  • Title
    The title of the event - this will be displayed on the calendar.
  • Location
    If you wish to supply information about the event's location, add that here.
  • URL
    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.
  • Color
    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.

Thumbnail Image
Events now have a place to specify a thumbnail image that will be displayed in the event popover.

Event Description
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:

  • Title
    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.
  • Type
    You can choose between two types of Calendar Feeds:
    • Google Calendar
      You must first make your Google Calendar public:
      1. In the Google Calendar interface, locate the "My Calendar" box on the left.
      2. Click the arrow next to the calendar you need.
      3. A menu will appear. Click "Share this calendar."
      4. Check "Make this calendar public."
      5. Make sure "Share only my free/busy information" is unchecked.
      6. Click "Save."
    • iCloud Calendar
      1. In Calendar app, select the calendar you'd like to export (left hand column of the app)
      2. Right Click the calendar name and choose to Share This Calendar
      3. 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 (used with iCloud Calendar )
    The URL (address) to your .ics webcal file.
  • Calendar ID (used with Google Calendar )
    https://yabdab.zendesk.com/hc/en-us/articles/205945926-Find-Google-Calendar-ID
  • Timezone The desired timezone of the returned events.
  • Color
    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.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk