DateSnap 1 Manual

Avatar
Eric
Follow

DateSnap stack

DateSnap Base

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.

Base:

  • Filter
    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.
    • 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
  • 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.
  • 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.

Format:

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

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

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

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

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

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.
  • 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
  • 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.

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
      The URL (address) to your Google Calendar feed or .ics file.

      Google Calendar:

      To obtain your Calendar's ID please read this article.

    • https://yabdab.zendesk.com/hc/en-us/articles/205945926-Find-Google-Calendar-ID

 

 

iCloud Calendar URL:

    1. Paste in the URL obtained from the Calendar's Sharing settings. (see iCloud Calendar above)
  • 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