New features Apply a Theme In Line Events From To Button Panel Week Numbers Date and Time Misc

Simple events Calendar

For the calendar to be visible and to function, we need to load all the files associated with Datepicker. To start,  put a small transparent panel on the page, open the Forms Tab on the Quick Build menu and drag the Datepicker onto the panel.

Right Click>Hide Panel and move it out of the way to some obscure part of your page. Remember, we will not be using it, just the files for it.

Copy the following, and from the the Top Menu bar Insert>HTML Fragment, click on the page and Paste to Body.

Change the number of months to between 1 and 4.

Events are added as shown in the script below. NOTE: The square brackets and comma at the end of each line EXCEPT the last line.

This demo is styled using the line in red below. (See Apply a Theme) . To style using Datepicker properties remove the line in red.

<link rel="stylesheet" type="text/css" href="">


$(document).ready(function() {





   var events = [

    { Date: new Date("01/01/2014"), Title: 'Meeting with manager'},

    { Date: new Date("01/25/2014"), Title: 'Probably a meeting'},

    { Date: new Date("01/29/2014"), Title: 'Drinkies at 7.00'},

    { Date: new Date("01/30/2014"), Title: 'Bad head day after drinkies'},

    { Date: new Date("02/02/2014"), Title: 'Create powerpoint presentation'},

    { Date: new Date("02/03/2014"), Title: 'Another pointless meeting'},

     { Date: new Date("02/04/2014"), Title: 'Continuation of yesterdays pointless meeting'},

    { Date: new Date("03/03/2014"), Title: 'Dinner'},

    { Date: new Date("03/09/2014"), Title: 'Annual holliday'},

    { Date: new Date("03/27/2014"), Title: 'Back to work after hols'},

    { Date: new Date("04/04/2014"), Title: "Meeting"},

    { Date: new Date("06/05/2014"), Title: "Holiday"},

    { Date: new Date("06/06/2014"), Title: "Boo Hoo - Return from Holiday"}



    numberOfMonths: 2,


        beforeShowDay: function(date) {

            var result = [true, '', null];

            var matching = $.grep(events, function(event) {

               return event.Date.valueOf() === date.valueOf();


            if (matching.length) {

               result = [true, 'highlight', null];


            return result;


        onSelect: function(dateText) {

            var date, selectedDate = new Date(dateText),

                i = 0,

                event = null;

            while (i < events.length && !event) {

                date = events[i].Date;

                if (selectedDate.valueOf() === date.valueOf()) {

                    event = events[i];




            if (event) {








<style type='text/css'>

   table.ui-datepicker-calendar tbody td.highlight > a {

   background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;

   color: #8f2946;

   /*color: #363636;*/

   border: 3px solid #8f2946;

   /*border: 3px solid #FFDE2E;*/



<div id="inline2"></div>

Copy the CSS below, Right Click off your page>Attach HTML scroll down and paste it in place of /*Page Stylesheet*/.

Changing the font size will change the size of the calendar, or if this is the only calendar on your site just keep the ui-datepicker-div statement and change the font in Edit>Site Properties>Datepicker.

Styling can also be carried out as noted in the Apply  a Theme page

.ui-widget {

   font-size: 20px!important;


.ui-datepicker table {

   font-size: 20px!important;


#ui-datepicker-div {



Events can be added to the script of the this calendar and will be viewable as alert type boxes by clicking the event date. When events are added/deleted an upload of the page is required.

Scroll to  between Jan - June  2014 to view events