Help Center

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.

This short tutorial will guide you how to view system logs for calendar.

Requirements:

A calendar already built by using Social Good Software

You have been using the calendar for some period of time, so that it does have some system logs to be viewed.

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 view the system logs.

2. Open a calendar from “Available Calendars”, select a day to view the system logs. Now click “Sync Activity”. This will open system logs view for the selected date.

3. Click any event from the log to view more details of the event.

4. You can change the selected date from the small calendar sign on top of the log view.

Note: The system logs will not be available if you delete the calendar either intentionally or accidentally

This short tutorial will guide you how to customize the calendar event labels.

Why Need to Setup Customize the Calendar Event Label:

You may need to customize your calendar event labels to meet your organization’s specific needs.

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 customize the calendar event type labels.

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

3. Look for “Events” on the top right side of the settings page.

4. If you want to add another query, click on “ADD ODATA LINK” in front of “Events”.

5. If you want to remove or group sold-out items in your calendar, click “ADD ODATA LINK” in front of “Reserved Events” tab.

6. If you have some query/ODATA Link added to Reserved Events Configuration, click “SETTINGS” in front of “Reserved Events Configuration” and customize the settings according to your preferences.

7. If you want to customize event name for each event type, click pencil sign below “Event Name”. This will open an on-screen message asking you to edit and customize the event name using all or some of the nine available variables. You can copy and paste as many variable as you prefer to customize the event name, and then click “SET NAME”

8. Click “AVE SETTINGS” on the bottom right of the page and then click “PREVIEW” and scroll back to your desired month by using “today” navigation to preview the customized event names.

For example you want to customize the event name useful for a person who wants to buy from the available tickets. Follow step 7 to set the name and type in text bar “Daily Admission – Only %availability% tickets left. Click for pricing”. Follow step 8 to preview the customized event name.

This short tutorial will guide you to customiz3 the group checkbox labels inside your calendar.

Requirements:

An already created calendar by using Social Good Software

Why Need to Customize the Group Checkbox Label:

Checkbox labels enable you to apply filters to hide or show certain events or fields.

Steps:

1. Click “Calendar Builder” tab on Social Good App. Now click a calendar from available calendars to open the calendar on which you want to group checkbox labels.

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

3. Look for “Checkbox Label” on the right side of the settings page. Click pencil sign to edit Checkbox label. Edit the label and click “Set Label”.

4. Click “SAVE SETTINGS” on bottom right of the settings page, and preview the calendar.

5. The selected checkbox will appear on top left of the calendar. Go to a month with some events in the calendar and then check and uncheck the checkbox to preview the effect and functionality of the checkbox.

6. Anytime, if you do not want the checkbox enabled, disable (by selecting “No”) “Enable Checkbox Filters” from the settings preferences.

This short tutorial will guide you how to change the colors of event types and checkboxes.

Requirements:

An already built calendar by Social Good Software

Checkboxes (either custom created or built-in)

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 change event and checkboxes’ colors.

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

3. Now look for “Event Type Color” and “Calendar Color” on the right side of the settings page.

4. Next click the color sign in front of the options and change them according to your preferences.

5. Now click “SAVE SETTINGS” at the bottom of the settings page and click “PREVIEW” button at the top of the interface to view the color changes.

Social Good Software allows you to properly manage your office activities. This video and short tutorial will step-by-step teach you how to build a calendar for Altru using Social Good Software.

Requirements:

• Social Good Software account
• Query(s) (discussed in the previous article) in information library for powering the Altru calendar

Steps:

1. Click “Calendar Builder” tab from the interface of Social Good Software and then click “create calendar”.

2. Next write the name (e.g. Daily Admission) of your Altru calendar and click “next”.
3. Next you will be asked to add ODATA Links. By clicking “ADD DATA LINK” button, a text bar for adding the link will appear.
4. Now go to the information library where you have built the query and click “Get ODATA link” on top of the interface.
5. Copy the link and paste it into “link” space (described in step 3) of Social Good Software and click “next”. The tool will take a couple of seconds for validating the ODATA Link.

6. When the link is validated click “next” button. A screen message with “Add ODATA Link” will appear as in step 4. Repeat the steps if you want to add more queries, otherwise just click “next”.
7. Now a screen message will appear to guide you about mapping Altru Data Fields into your calendar.

8. A series of questions and options will appear on the screen for mapping the fields. Select suitable preferences according to your specific needs and situation. If you want to ignore some fields you can do so by clicking “N/A” option below these questions.

These preferences include:

1) Map the Title

The Title determines how the calendar items are grouped. Check the data grouping in library information and click the option according to how your data is grouped in the library information.

2) “Map the Description” and “Map the details” preferences

If the event has some description and details e.g. name, start date, start time etc. select them accordingly or click N/A if the event doesn’t have any description.

3) “Map the Date field”, “Start Time”, and “End Time” preferences

For mapping the date field click “Program Events/start date”, for mapping the Start time click “Program Events/Start time”, and for mapping the end time click “Program Events/End time”

4) Map the System Record ID

The most important preference for mapping the fields is “Map the System Record ID”.

After mapping the System Record ID, and clicking the “next” button, “Confirm Map Fields” overview will appear to counter check the preferences you have selected in the previous steps.

9. Click “Next” to confirm the Map fields. Now a series of following prompt preferences (mostly with “Yes/No” options) for your Altru calendar will appear.

• Link to Altru Forms

Select “Yes” if you want your Altru calendar to open Altru related forms in a new window when clicked, and if it is a public placing calendar.

• Show More

Select “Yes” if you want to display more than four events in month view of the calendar.

• Last updated timestamp

Select “Yes” if you want to display when the last time calendar was updated.

• Checkbox Filters

Select “Yes” if you want your calendar to display checkbox filter to show and hide based on types.

• Event Time

Select “Yes” if you want your calendar to show event time along with the event.

• ToolTips

Enabling this option will make the Altru Calendar display tooltips.

• Next available event

Select “Yes” if you want your calendar enable you to jump to next available event in the calendar without manually going through all the months. If all of your events are in the past select “No”.

• Calendar Type

Select the type of your calendar accordingly from the options provided.

• Mobile Calendar View

Select how you want your calendar to be viewed (either monthly, weekly, daily or list view).

• Days to show on Calendar

You can select the days which should be visible on the calendar.

10. After selecting your options for all the above preferences, an overview will appear to countercheck the preferences. Now click “Create Calendar” to create your Altru calendar.

11. Double click the calendar icon with its name. It takes a couple of minutes before your Altru Calendar is created.
12. Click “sync activity” tab on the top right of the tool to update the tool. Syncing the calendar takes a couple of minutes.

13. After it is synced click “preview” button on top right of the tool to preview your calendar.
14. Navigate to your desired month by clicking “today” button on the top right of the Altru calendar.
15. Your Altru calendar is ready now and you can view all the scheduled activities of the selected month.