Tutorials stack icon

Kalendar

The ultimate calendar event stack for RapidWeaver. Connect Google, Outlook, any calendar with an iCal address, or add your own custom calendars with stacks.

Table of Contents

  • How to use (Start Here)
  • Setup – External Calendars
  • Setup – Internal Calendars
  • General
  • Header
  • Content
  • Events
  • Datepicker
  • Modal
  • Colors & Fonts
  • Language & Text
  • Date & Time Formats


How to use

Get up in running with Kalendar in minutes!

Firstly, add the stack to your page. You'll then see that there are two sections in the stack –
External Calendars & Internal Calendars

You can either:

  • Connect an external calendar (Google, Outlook, iCal) from a .ics url
  • Create an internal calendar with RapidWeaver & Stacks

You'll notice that there is one external calendar (US Holidays by Google),
and one internal calendar already setup for you.

There is no limit to the amount of external or internal calendars that can be connected.

Learn more on adding your own external calendars or creating an internal calendar below.



External Calendars

You can add external calendars by clicking on the ( + ) button under the External Calendars section of the stack.

Once added, go to the settings panel and give your calendar a name.
It can be any name you'd like, just be sure not to include any spaces. We recommend using underscore like so:

my_calendar_name or south_korean_holidays

Next you'll need to provide a url for your external calendar.
External Calendars require an iCal address url ending in ".ics"

like so: https://calendar.google.com/calendar/ical/pa4c3h6m3ktpvp65jrld6g5qf0%40group.calendar.google.com/public/basic.ics

If you already have access to an ical address, simply paste it in the iCal address field, and your calendar will be connected.

Below you will find a few tutorials on how to get the .ics address from different services such as Google, and Outlook.

Google

Step #1
Step #2
Step #3


Outlook

Step #1
Step #2
Step #3
Step #4
Step #5


Apple / iCloud

Step #1
Step #2
Step #3
Step #4
Step #5




Internal Calendars

You can add external calendars by clicking on the ( + ) button under the RapidWeaver Calendars section of the stack.

Once added, go to the settings panel and give your calendar a name.
It can be any name you'd like, just be sure not to include any spaces. We recommend using underscore like so:

my_calendar_name or south_korean_holidays

Next, you can add calendar events using the ( + ) button inside of the calendar stack.

You'll see that each event has the following options:

  • All day (true or false)
  • Start Time
  • End Time
  • Title
  • Description
  • Location

NOTE: All day events ignore the time field. When an item is set to all day, you will only need to worry about adjust the dates.

Now all you have to do is add more events to your calendar and you are good to go!



External / Internal Calendar Styling



Kalendar – General Settings

Show Calendar Key (Checkbox)

If checked, a list of all displayed calendars will show up on the right hand side. Individual calendars can be toggled on/off by users.

If unchecked, the key will not be displayed.

Markdown Event Descriptions (Checkbox)

If you would like your event description text to be converted to markdown, check this option. This worked for both Internal and External calendars, meaning you can write markdown in your Google, iCal, Outlooker (etc.) event descriptions, and it will be converted on your site!

Radius

This sets the corner roundness of the outer stack container.

Max Width

This sets the maximum width of the entire calendar.



Kalendar – Header (Month, Date, Search)

Month (Desktop & Mobile)

Sets the font size of the month in the calendar header.

Date (Desktop & Mobile)

Sets the font size of the date in the calendar header.

Padding (Vertical & Horizontal)

Sets the padding around the edges of the calendar header section.

Min Height

Here you can set a minimum height for the header section, the provides a nice, modern look if desired. Set it to 0, if you don't care for this.



Kalendar – Events

Title (Desktop & Mobile)

Here you can set the font-size of the event card titles

Duration (Desktop & Mobile)

Here you can set the font size of event durations such as: "( 5 / 6 days )"
that are displayed for multiday events.

START – END Time (Desktop & Mobile)

This sets the font size of the time that is displayed in the event cards.

Time Top (Desktop & Mobile)

The font size for the top part of the event start time displayed to the left of the events. Intially displayed as (08/12...)

Time Bottom (Desktop & Mobile)

The font size for the bottom part of the event start time displayed to the left of the events. Initially displayed as (AM/PM...)

Card Radius

Sets the corner radius of the event cards.

Card Padding

This controls the inner padding of the event cards.



Datepicker

Here you can set the sizes for the calendar datepicker and the calendar key displayed on the right hand side of the stack.

Weekdays

This sets the font size for the weekday titles in the datepicker.

Dates

Here you can set the font size for the date numbers.

Date Radius

This sets the corner roundness for the datepicker date blocks.

Button (Text & Radius)

At the bottom of the datepicker there is a a button for jumping to the current day. This styles control the font-size and corner-roundness of this button.

Key

By default there is a key displayed underneath the datepicker that allows users to toggle calendars on/off. These styles are for this key.

Key Text

Here you can set the font-size for the calendar key text.

Key Checkbox (Checkmark & Box)

Sets the size of the checkmark and outer box of the calendar key checkboxes.

Key Checkbox Radius

Sets the corner roundness of the checkboxes.



Kalendar - Modal

When an event item is clicked, a modal appears showing the full details of the event including location, full dates & times, and event descriptions. Here you can customize the sizes of the modal content.

Title (Desktop & Mobile)

The event title displayed in the modal.

Duration (Desktop & Mobile)

"( 5/6 days )"

Adjusts the font size of the event durations in the modal.

Location

Adjusts the font size of the location text in the modal.

Date

Adjusts the font size of the date/time text in the modal.

Date Padding

In the modal, event dates/times are surrounded by a small box. You can adjust the padding around this box with this option.



Colors & Fonts

Here you can edit the colors & fonts for the Kalendar Stack.

Fonts

Here you can set the font for the calendar.

There are 3 options for selecting fonts:

  • Preset (choose from a list)
  • Custom Google Font (Quick Google Font by name)
  • Custom Font (Your own custom font name)

If you choose Custom Google Font all you need to do is type in the name of the google font that you want to add, it will work like magic!

You can find Google Web fonts here: www.fonts.google.com

If you select "custom" you will need set a custom font name of your own. Note, that you must provide your own font library somehow.

Header Colors

Header Text (Month & Date)

Here you can set the color of month and date that appear in the header section of the stack.

Header Background

For the header backround, you can choose between 5 different options:

  • Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image with a single color overlay
  • Image with a gradient overlay

Content Colors

Titles

This sets the color of the "Time", "Events" titles in the content section.

Border

Sets the color of the borders used in and around the Kalendar stack.

Time Top & Bottom

Here you can set the color of the top/bottom time sections to the left of each event card.

Datepicker Styles

Weekday Titles

Here you can set the color for the weekday titles displayed in the datepicker.

Date (Text, Border, and Background)

Here you can set the text color, border color, and background color of the dates in the datepicker. You can set different styles for:

  • Initial state
  • Hover state
  • Active state (the selected date)

Button (Go to today button)

Here you can set the Text and Background color of the today button for both:

  • Initial state
  • Hover State

Main background

For the backround, you can choose between 5 different options:

  • Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image with a single color overlay
  • Image with a gradient overlay

Simply select the background type that you want and the appropriate options will appear. : )



Kalendar - Language & Text

Here you will find various options for setting the language of the calendar, as well as changing specific date/time related words throughout the calendar stack.

Kalendar - Date & Time Formats

If you would like, you can customize specific date and time formats used throughout the stack to your liking. View date/time format codes here:

http://momentjs.com/docs/#/displaying/format/

Kalendar Changelog

Version 1.0.4

  • Fixed small bug with dot alignment in old version of Firefox
  • Fixed bug causing "no events" text to always be displayed in white color

Version 1.0.3

  • Added option for setting start of week to Monday

Version 1.0.1

  • Fixed small bug related to event time sorting
  • Added language support for Danish

Version 1.0.0

  • Initial Release