Calendar Builder

This short tutorial and/or video will guide you how to add custom CSS and JavaScript to calendar.

Why Need to Add Custom CSS and JavaScript to Calendar:

Adding custom CSS and JavaScript enables you to improve the functionality of your calendar to meet your organization’s special requirements and preferences.

Requirements:

An already created calendar using Social Good Software

An already written CSS and Javascript you want to add to your calendar

Note: You can also “Reach out to us” if you need help writing these code.

Steps:

1. Click “Calendar Builder” tab on Social Good App. Now click a calendar from available calendars to open the calendar to which you want to add custom CSS and JavaScript.

2. Click “SETTINGS” on top right of the interface. This will open settings page with many preferences to customize your calendar.

3. Scroll down the settings page and look for blue colored “CSS” and “JavaScript” tabs on the left side of the settings page.

4. Now click “CSS” tab, copy paste the CSS code in “Custom CSS Code” box and press “Save”.

5. Similarly click “JavaScript” tab, copy paste the JavaScript in “Custom JavaScript Code” box and press “Save”.

6. Now click “SAVE SETTINGS” at the bottom left of the settings page and scroll up the page.

7. Next click “Preview” tab on the top right of the page to preview the added functionality of CSS and JavaScript code.

8. Click “Share” tab on the top right of the page and then click “Preview Calendar” and go down to mobile device by shrinking your window down or by using your mobile device to preview the calendar on a mobile device.

Note: Anytime you want to remove/edit the CSS and JavaScript from your calendar go to “CSS” and “JavaScript” tabs and remove/edit the code.

CSS

.render-calendar .container-wrapper {
    max-width: 80%;
    float: left;
}

.render-calendar .checkbox-wrapper {
    width: 19%;
    overflow: scroll;
    padding-left: 1%;
}

@media (max-width: 650px) {
    .render-calendar .container-wrapper {
        max-width: 100%;
    }

    .render-calendar .checkbox-wrapper {
        width: 100%;
        padding-left: 0%;
    }

    .render-calendar .checkbox-container {
        width: 100%;
        max-width: 100%;
    }
}

JavaScript

var checkboxes = $(container).find('.checkbox-wrapper').detach();
$(container).append(checkboxes);
var height = $(container).find('.container-wrapper').height();
$(container).height(height);
$(container).find('.checkbox-wrapper').height(height);

This article will guide you how to set up custom grouping for calendar.

Why Need to Set up Custom Grouping for Calendar:

Custom Grouping on calendar will enable you to group events based on event titles that have a specific pattern. This is very useful especially when you have too many checkboxes and categories in your calendar.

Warning:

• If you activate this feature, it will cause a new name checkbox and colors to be generated for the new group events. So if you have any customs labels or colors, you will need to redo them after enabling the custom grouping.
• Only one separator per calendar is allowed.

Requirements:

An already created calendar using Social Good Software

Steps:

1. Click “Calendar Builder” tab on Social Good App. Now click a calendar from available calendars to open the calendar for which you want to set up custom grouping.

2. Click “SETTINGS” on top right of the interface. This will open settings page with many preferences to customize your calendar.

3. Scroll down the settings page and look for “Custom Grouping” on the left side of the settings page.

4. To learn more about the process of custom grouping for your calendar watch the video.

Once you have correctly followed the steps in this tutorial and video demo, all the events of the same event types (first part) and different event names will be grouped together. However grouping will be done under the event type, and event names will be ignored.