Dateloom Manual

Avatar
Mike
Follow

DateLoom plugin

DateLoom Basics

DateLoom is an easy to use Calendar plugin for RapidWeaver. You can create events, add event details and even localize calendar labels to any language. DateLoom will also allow you to display Google Calendar data ON your published calendar. It's important before starting out to determine whether your needs will be best suited by Google Calendar events, DateLoom events, or a mix of both.

Creating Events?

You can create events within DateLoom AND choose to display Google Calendar events all in the same calendar. (Note: DateLoom does not sync or post any data TO Google Calendar - they are simply displayed together on one calendar) If you want to allow users to collaborate or modify calendar events, you'll want to use Google Calendar and setup calendar permissions for those users to add events on the Google calendar site. If you will be maintaining all your own calendar events from within RapidWeaver, simply use DateLoom events.

DateLoom Navigation Overview

When in Page Edit view, The DateLoom plugin contains three separate input areas you'll want to be familiar with (Simply switch between these input areas using the buttons at the bottom of your RapidWeaver window). These views are

Events
These are the DateLoom (ie, non-Google Calendar) events that will be displayed on your calendar.

Header/Footer
The header and footer content areas above/below your calendar

Page Inspector
Overall page settings for the entire plug-in are located here. These control overall calendar appearance and behavior.

Events

To add an event to your DateLoom calendar, click the + symbol in the event list. Once the event's been added, you can define it.

Edit Event

This view allows you to define the event's date, time, name, style (color label) and the event's details.

  • Title Descriptive title of event. This will be displayed on the calendar as the event's name.
  • Start Date: Select the event's beginning date from the calendar and enter the beginning time directly below.
  • End Date elect the event's ending date from the calendar and enter the beginning time directly below.
  • All Day Enable this checkbox if the event should encompass the entire date (midnight -> midnight) This will suppress time display for this event.
  • Event Style Select from one of nine colors - this event's bar on the calendar will be displayed in the color you select.
  • Event Details This is a styled text area. You can enter long descriptions of your event here using bold, italics, underline, etc as well as links and or images. Note that event details will not be displayed in Rapidweaver preview mode, the calendar must be published to display event details.

Events can be removed or duplicated from the event list. To remove an event, select the minus symbol (-) in the event list. If you have many similar events you may find it best to simply duplicate an existing event and modify a few attributes. To duplicate an event, click the duplicate button to the right of the delete (-) button.

Here you are given the option to place content above (header) and below (footer) your DateLoom generated page. These ares are STYLED TEXT - use the WYSIWYG editor to format text as you'd like it to appear. You can also drag in images to header or footer areas.

Page Inspector

Once you've setup your calendar items on the Events pane, it's time to take a look at the form settings in the Inspector - this is where you can control how your calendar is presented.

On your DateLoom page, you'll see four tabs under the Page Inspector

  • General
    Plugin's built-in appearance and default settings.
  • CSS
    CSS override area for (ADVANCED USERS ONLY)
  • Google
    Setup Google Calendar feeds
  • Text
    Customize text labels, convert the stock English calendar into your own language
  • Format
    Time and date formatting as well as calendar navigation preferences

General Tab

JQuery UI Settings:
DateLoom can utilize JQuery UI themes to style the calendar. Enable this box to select from one of 24 stock JQueryUI appearance themes. These themes can be previewed at: http://jqueryui.com/themeroller/#themeGallery

Theme:
Select your JQueryUI theme from this pulldown menu.

Default Event Style:
Default event color selection

Default View Type:
Your calender viewers can change views at any time, but your default selection will be presented when they first view the page. Select from:

  • 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

Tool Tip Style:
Choose from one of 12 tool tip themes. Tool tips are shown when a user hovers the cursor over an event, it is an event summary display which includes event name, date and time (unless event is an all day event), but no event details.

First Day of Week:
Different regions have different first day of week preferences. If you'd like your week view to begin on a Monday, for example, simply select Monday as the first day of the week.

Display Right to Left:
Enabling this checkbox will cause a reverse view of the calendar with days descending from left to right (ie, Sat/Fri/Thurs/Weds/Tues/Mon/Sun)

CSS Tab

* This is an advanced feature and requires general knowledge of CSS and HTML. To view the plugin's default css, export or publish your site and locate the dateloom-pageX.css file. This will give you a good starting point for further customization. Sorry, we can not provide support for CSS customizations.

Google Tab

Google Calendar Events
Adding a Google Calendar ID to your DateLoom calendar is very simple.
First, you'll need to login to your Google Calendar account.

  • Select the calendar you wish to display via DateLooom and click on the calendar's settings menu.
  • Look for the tab in your settings titled SHARE THIS CALENDER. Go to this tab and make sure the MAKE THIS CALENDAR PUBLIC option is enable.
  • Next, go to the Calendar Details tab. Look for the field titled Calendar ID. For more info on obtaining your Calendar ID please read this article. https://yabdab.zendesk.com/hc/en-us/articles/205945926-Find-Google-Calendar-ID
  • Copy this address, you'll need it in a moment.

To add the feed address to DateLoom, click the + symbol at the bottom of the Feeds list. Paste the address you obtained from your Google ID feed into the ID field. Then under Color, select the color DateLoom will use to display this Google calendar's events.

Text Tab

Custom text labels are intended to localize the calendar. These tabs will display the English labels as default. Enter your desired replacement text for each label under:

  • General Text Descriptive labels for changing view (terms for Month/Week/Day nav) and general event text (Start/End/When)
  • Day Names
    • Labels for day names (Sunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday) and abbreviations.
  • Month Names
    • Labels for month names (January through December) and abbreviations.

Format Tab

All preferences for time and date order/presentation are located in the Format tab

Date/Time Sub-Tab

Date Format:
You can define how you'd like your date displayed by using the following abbreviations in the Date Format field, format as you'd like displayed [EX: MMM dd, yyyy ]

  • 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
  • S - 'st', 'nd', 'rd', 'th' for the date

Time Format:
You can define how you'd like your time displayed by using the following abbreviations in the Date Format field, format as you'd like displayed [EX: hh:mm tt ]

  • 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
  • t - 'a' or 'p'
  • tt - 'am' or 'pm'
  • T - 'A' or 'P'
  • TT - 'AM' or 'PM'

Axis
Determines the time-text that will be displayed on the vertical axis of the agenda views.

Time (Agenda)
Determines the time-text that will be displayed on each event in agenda views.

Title Sub-Tab
Determines the text that will be displayed in the header's title. The header title will vary depending on the calendar view (Mondy/Week/Day views). You can assign a custom format for each view.

Title (Month): default MMMM yyyy
Title (Week): default MMM d[ yyyy]{ [ MMM] d yyyy}
Title (Day): defaultdddd, MMM d, yyyy

Column Sub-Tab

Determines the time-text that will be displayed at the top of columns. The column title will vary depending on the calendar view (Mondy/Week/Day views). You can assign a custom format for each view.

Column (Month): default ddd
Column (Week): default ddd M/d
Column (Day): default dddd M/d

Header Sub-Tab

Determines the order of navigation and view titles that will be displayed in the header. To customize the button text, view the TEXT tab. This format tab controls only button ORDER.

The following buttons can be customized:

  • 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
  • agendaWeek Button for moving the calendar to the current Agenda Week view
  • agendaDay Button for moving the calendar to the current Agenda Day view
  • basicWeek Button for moving the calendar to the current Basic Week view
  • basicDay Button for moving the calendar to the current Basic Day view
  • month Button for moving the calendar to the current Month view

Left: default prev,next today
Center: default title
Right: default month,agendaWeek,agendaDay

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk