Skip to content

CodeCoupler UI Widget "Calendar"

The CodeCoupler Grid is basically a modified version of the main FullCalendar which can handle Kendo UI DataSources or its derivative CodeCoupler DataSource Mixins.

New Options

dataSource

Define with dataSource a DataSource providing event objects. The DataSource will be queried for the current period to be displayed as soon as the calendar will be initialized and on each view change. If dataSource is set the origin option events of FullCalendar will be removed.

dataSourceFilter

Define with dataSourceFilter the field names which will be used to query a time span and the base filter which will be always and-combined with the date range filtering. dataSourceFilter must be an object and can have the following properties:

1
2
3
4
5
6
7
8
{
  //(string) Fieldname where the start of the event is saved
  start: "start",
  //(string) Fieldname where the end of the event is saved
  end: "end",
  //(object) Base filter which always will be used
  base: null
}

Please note that the data in the field defined in end have to be an inclusive end date.

Alternatively, the variable can be defined as a function. The function will receive two arguments: start and end. These arguments contains the date in ISO format YYYY-MM-DD. The start date is inclusive the end date is exclusive. You have to return a filter object which will be used. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function(start, end) {
  return {
    logic: "and",
    filters: [
      {
        field: "myEndField",
        operator: "gte",
        value: start
      },
      {
        field: "myStartField",
        operator: "lt",
        value: end
      }
    ]
  }
}

Define dataSourceMap if using a function

If you define dataSourceFilter as a function you must define a dataSourceMap function.

dataSourceMap

With dataSourceMap you can convert a each data item to an event item. By default only the properties id, title, start and end will be extracted from the data item. The default extraction try to get the id and the title from the fields id and title. The start and the end value will be extracted from the fields defined in dataSourceFilter if not defined as function.

You can overwrite this and add of course any other property like display, allDay etc. Here an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  dataSourceMap: (dataItem) => {
    return {
      id: dataItem["eventId"],
      start: dataItem["startTimestamp"],
      end: dataItem["endTimestamp"],
      title: dataItem["eventTitle"],
      allDay: true,
      display: "background"
    };
  }
}

Please note that the resulting value of end have to be an inclusive end date.

In addition to the basic event object properties you can set a new property create to false if you do not want an data item to be mapped to an event.

eventSources[].dataSource, eventSources[].dataSourceFilter,
eventSources[].dataSourceMap

Exactly like dataSource, dataSourceFilter and dataSourceMap for multiple event sources. eventSources.events will also be overwritten if eventSources.dataSource is set.

dataSourceGlobalFilter

Add a filter that will be always combined with the date range filtering of all dataSources (the main one and all dataSources from "eventSources"). It will be combined with "and".

onlyBackgroundEvents

If true all events except backgroud events will be not shown. This allows a much smaller representation of the calendar.

themeToolbar

Different header themes. For now only one theme is implemented named small which is much smaller as the default one. If null the default one from FullCalendar will be displayed.

pointerOnDay

If true, the cursor will change to "pointer" on the whole day cell, not only on an event or the day number.

Changed defaults

1
2
3
4
5
{
  initialView: "dayGridMonth",
  themeSystem: "bootstrap",
  height: "100%",
}

Setter

dataSourceGlobalFilter

Change dataSourceGlobalFilter in runtime.

Howto get data item from event

If you get an event object you can access the corresponding datasource item:

1
let dataItem = event.extendedProps.dataSourceItem;