Calendars

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.

This tutorial will guide you how to configure availability on your calendar of remaining seats for a specific event.

Requirements:

An already created calendar using Social Good Software

An already created Reserved Events Query

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 configure availability.

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

3. Click settings icon in front “Reserved Events Configuration” on the top right of the setting page.

4. This will open settings options for reserved events configuration. From the settings options you need to map three different things i.e. Title, Date Field, and the Start Time correctly. Now click “SET VALUES” at the bottom to go back to main settings page.

5. Now click pencil sign below “Event Name”. This will open an on-screen message asking you to edit and customize the event name using nine available variables. Use the variable “%availability% to show the availability on the calendar title for each calendar type.

6. Click “PREVIEW” tab on top of the interface to preview whether availability shows up on the calendar or not.

Note: The availability will only show up if you have reserved events configuration and query setup correctly.

This short tutorial will guide you how to delete your calendar. It will also inform you of potential consequences of doing so and also which steps you should take before deleting your calendar.

Warning:

If your calendar is embedded in someone’s website or your mail client, it would stop appearing there and display an error message. So you need to notify them in advance to remove the embedded calendar.

All the events, system logs, API requests, and the data downloads related the calendar will also be deleted. So, if you want to keep this information for the auditing or any other purpose, it is highly recommended that you should not delete the calendar.

Steps:

1. Click “Calendar Builder” tab from you Social Good App, and open the calendar you want to delete.

2. Now click “SETTINGS” on the top right side of the interface and scroll all the way to the bottom of the page.

3. Click “DELETE CALENDAR” on the bottom left of the settings page. You will get an onscreen message to inform you of the consequences of deleting the calendar.

4. Once you fully understand the consequences and still want to delete the calendar, click “DELETE CALENDAR”. This will delete the calendar, and it will no longer be available in Social Good App, or anywhere else.