Tockify Calendar
Display an event calendar on your site with the Tockify integration widget. Calendar features include live sync with Google Calendar, RSVP’s, and extensive styling. Several layout options and sizes allow for convenient placement on new or existing sites.
Demo: https://demo.wocode.com/tockify
Tutorial Video
Setup
SIGN UP AT TOCKIFY.COM
- Go to tockify.com
- If you do not yet have an account, click the “Get Started for Free” button.
- If you already have an account, click the Log In or Sign in links to sign in.
Note: Tockify offers free and paid subscription options. Review pricing plans and features carefully. During the free trial period, you may have access to subscription features that are not available on the free account.
CREATE A CALENDAR
- After signing up, you will be prompted to create your first calendar. Proceed through the calendar creation form.
- Note the name of your calendar. This will be needed when setting up the widget.
CREATING EVENTS
- After you’ve created your first calendar, you will be taken to your calendar editor.
- Click the “Create Event” button in the upper left corner to create an event.
- There are extensive options available for your event, such as images, details, buttons and more. Enter all that is applicable.
- Repeat this process, creating all the events you like.
- Note that you may copy events to save time when certain events share the same details.
- For recurring events, use the “Recurring” options to set daily, weekly, monthly or yearly options.
CUSTOMIZING YOUR CALENDAR STYLING
Note: Paid Tockify subscription plans have access to more styling features, including themes that you can create and save. Free accounts have a more limited set of styling options. Review Tockify subscription plans here.
- After you’ve created your first calendar, you may customize the styling. Click “Customizer” in the top menu, or go directly using this link: https://tockify.com/i/customizer?tab=basics
- By default, you will see the Tockify demo events. If you have not created many of your own events, or if you do not yet have images for your events, using the demo events may be handy. To see your own events, uncheck the “Show Demo Events” box in the top menu.
- Each layout style (Pinboard, Agenda, Monthly) has it’s own set of options. And within each layout style, you will have access to “Colors and Styles” and “Layout” options. Use the tabs to toggle between these option sets.
- Explore the customization options thoroughly, as the options are extensive. Paid subscription plans allow you to create and save your own themes.
WIDGET PLACEMENT
- Drop the Tabbed Panel widget on your site.
- Place the widget where you would like your calendar to appear on your page.
- Note that you will see a placeholder for the calendar when you drop the widget, instead of a rendered calendar in the site editor. The full calendar will be seen when the site is published.
- Resize the widget container as needed.
- For a full browser width calnedar, enable “Full Bleed Row” in the parent row’s settings.
WIDGET OPTIONS (CONTENT)
- Open the widget option panel.
- Enter your Calendar Name. This is the name that you chose when creating the calendar. This can be found in several areas in your Tockify account.
- Calendar Type: This dropdown contains options for a full calendar or a mini calendar. These options change the general layout and overall size of the calendar when it is displayed. Note that this option also varies per Calendar Style.
- Calendar Style: These styles offer different display styles for your calendar. The styles vary greatly. For a quick look at the styles, use the Pinboard/Agenda/Monthly buttons in the top left corner of our demo calendar here: https://demo.wocode.com/tockify
- Default Search Value: This field allows you to set a pre-filled search term for the search function. The calendar will load with this term entered, and only results of the search term will be displayed. This feature can be used as a filter, to show only certain results by default.
WIDGET OPTIONS (DESIGN)
The only options in the Design section are the spacing options. All styling and customization options can be found in your Tockify account, here: https://tockify.com/i/customizer?tab=basics