Add custom code to soSIMPLE Calendar – soSIMPLE Software/Paradise Partners

NOTE: please beware, this is an advanced feature of soSIMPLE Calendar – any changes you make to this code may break your calendar or cause it to behave in unexpected ways.

CUSTOM JS/CSS

soSIMPLE Calendar was designed to be expanded and customized as your needs grow.

Anyone who as asked us to add custom functionality to soSIMPLE has no doubt encountered the “Custom JS” and “Custom CSS” settings in soSIMPLE Calendar Settings. To add custom JavaScript or custom CSS styling to your calendar, follow these instructions:

CUSTOM JS

Adding Custom JS allows us to make custom modifications to how your calendar behaves, or adds new features to your calendar.

To add Custom JS that we’ve provided:

Select your calendar in soSIMPLE Calendar Settings
Click the “Edit” hyperlink next to Options (in the lower left of the Settings window)

Double-Click or Click the “Edit” button to edit your selected Options
Scroll to the bottom of the list of settings. The last field is labeled “Custom JS”
Click “Edit” next to the Custom field – now you can paste or edit your custom code in the ensuing window.
Click “OK/Save/Done” a couple of times to save the new settings.

Beware the curly quote!

Please beware when pasting in code, especially from an email, that your double & single quotes haven’t gone “curly” on you. All quotation marks should be straight. You can usually straighten them out by manually typing them over again in the Custom JS editing window.

See the difference?

Curly double-quote (or ) versus straight double-quote ( ).

Curly single-quote (or ) versus straight single-quote ().

CUSTOM CSS

Adding Custom CSS allows us change your theme, or the look of specific components of your calendar.

To add Custom CSS that we’ve provided:

Select your calendar in soSIMPLE Calendar Settings
Click the “Edit” hyperlink next to Theme (in the lower left of the Settings window)

Double-Click or Click the “Edit” button to edit your selected Theme
Scroll to the bottom of the list of settings. The last field is labeled “Custom CSS”
Click “Edit” next to the Custom field – now you can paste or edit your custom CSS in the ensuing window.
Click “OK/Save/Done” a couple of times to save the new settings.

Version 3.4 added optional server-side file customizations

New for version 3.4: you can now also include custom files in the root directory of your soSIMPLE php server directory. If soSIMPLE encounters these files, they will be included as the calendar is displayed:

../sosimple/scripts/: any javascript files in this directory will be loaded into the ‘head’ section automatically, in alphabetical order, after all other scripts and CSS files have been loaded.
../sosimple/css/: any css files in this directory will be loaded into the ‘head’ section automatically, also in alphabetical order, after all other scripts and CSS files have been loaded.
../sosimple/php/head.php: this file will be loaded into the end of the ‘head’ section
../sosimple/html/head.html: this file will be loaded into the end of the ‘head’ section
../sosimple/php/top.php: this file will be loaded into the beginning of the ‘body’ section, before any calendar code
../sosimple/html/top.html: this file will be loaded into the beginning of the ‘body’ section, before any calendar code
../sosimple/php/middle.php: this file will be loaded after the floating navigation calendars, before the ‘scheduler’ calendar code
../sosimple/html/middle.html: this file will be loaded after the floating navigation calendars, before the ‘scheduler’ calendar code
../sosimple/php/bottom.php: this file will be loaded into the end of the ‘body’ section, after the calendar code
../sosimple/html/bottom.html: this file will be loaded into the end of the ‘body’ section, after the calendar code