Manipulations with Lightbox

Getting/setting the control value

To get/set the value of the section's control, use the formSection object as in:

//to get the value
var value = scheduler.formSection('description').getValue();
//to set the value

Related sample:  Setting/getting values of lightbox's controls

Checking whether the lightbox is opened

To check whether the lightbox is currently opened or closed, use the lightbox_id property of the state object returned by the getState method. If the lightbox is opened, the method will return the id of the opened event, otherwise 'null' or 'undefined' will be returned:

if (scheduler.getState().lightbox_id){
    //the code for the opened lightbox
} else {
    //the code for the closed lightbox

Mapping properties of an event object to the lightbox sections

To map a property of an event object to a lightbox section, do the following:

          "start_date":"2019-03-02 00:00:00",
          "end_date":"2019-03-04 00:00:00",
          "text":"Graduation ceremony",

Note, that all properties your data source returns will be added to event objects and will available for the client-side API.

  • In order to map a lightbox control to a specific property, assign the name of the event property to the map_to property of a section:
    {name:"description", height:70, map_to:"text", type:"textarea" , focus:true},
    {name:"locationInput", height:35, map_to:"location", type:"textarea" },
    {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")},
    {name:"time", type:"time", map_to:"auto"}

Only exceptions are the time and the recurring controls that are always mapped to a fixed properties (event.start_date/event.end_date and event.rec_type/event.event_length/event.event_pid respectively).

Automatic end date in the Time control

To set the initial duration of events and make the end date automatically change to preserve this value, use the event_duration and auto_end_date properties:

//specify the event duration in minutes for the auto_end_time parameter
scheduler.config.event_duration = 60; 
scheduler.config.auto_end_date = true;

Related sample:  Automatic end date

With such configuration, each time the user changes the start event time or date in the lightbox, the end event time and date will be changed automatically, in order to make the event duration equal to 60 minutes (the value of the event_duration option).

Setting the default value for a lightbox's control

To set the default value for a lightbox's section, use the default_value property of the section's object.

For example, you have added a custom section that displays the event's location to the lightbox and called it 'Location'. When the user creates a new event, the field will be just empty. To correct such a behavior and to display, say, the address of the Greenwich Observatory by default, specify the lightbox as in:

scheduler.config.lightbox.sections = [
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"location", height:43, map_to:"event_location", type:"textarea", 
    default_value:"Blackheath Avenue London,Greenwich,Greater London SE10 8XJ,UK"},
    { name:"time", height:72, type:"time", map_to:"auto"}

Note, the default_value property sets the default value for the lightbox's section, not for a new event, i.e. a new event gets the specified value only after the user opens the lightbox and saves the event.

To set the default value directly for new events, use the onEventCreated event:

scheduler.attachEvent("onEventCreated", function(id,e){
    scheduler.getEvent(id).location = 'Blackheath Avenue London, Greenwich...';
    scheduler.updateEvent(id); // renders the updated event
    return true;

Changing the order of date-time controls and removing time selectors

You have the possibility to change the order of date-time controls in the 'Time period' section or to remove some of them. To do this, use the time_format property:

  {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
  {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]}

Note, you can't change the data presentation format, just the order of items in the array.

For example, you can change the format as in:

time_format:["%H:%i", "%m", "%d", "%Y"] 
//month goes first
time_format:["%m","%d", "%Y", "%H:%i"]
//the year selector is removed
time_format:["%H:%i", "%m", "%d"]
time_format:["%H:%i", "%M", "%d", "%Y"] //"%m" was changed to "%M"

Read-only mode

The detailed information about the read-only mode see in chapter Read-only Mode.

Making a section hidden for some events

To make a section hidden for specific events, redefine its set_value method as in:

    var style = ev.some_property?"":"none";; // editor area; //section header
    scheduler.setLightboxSize(); //correct size of lightbox

'Full-day event' option

To add the 'full-day event' option to the lightbox, set the full_day option to true. For this, just add the next code line:

scheduler.config.full_day  = true;

Once, the full_day option is enabled, the Full Day checkbox will be displayed in the left part of the Time period section. After selection, all entry fields of the section will be blocked, and the event duration will be set as a full day from 0.00am the current cell date to 0.00am next day.

Related sample:  Full day events

Types of lightbox

The lightbox can be presented in one of 2 types:

  • Standard (wide);
  • Short.

In the default skin, the lightbox can be presented only in the standard (wide) type, while in the 'glossy' or 'classic' skin you can choose between types.

To set the desired type, use the wide_form property:

scheduler.config.wide_form = true;

Standard (wide) lightbox:


Short form:


Button in the section header

It's possible to have a custom button in the section header. To add a button to the header of a section, complete the following steps:

  • Specify the 'button' property to the section object:
{name:"description", height:130, map_to:"text", type:"textarea", button:"help"}
  • Set the label for the button:
// 'help' is the value of the 'button' property
scheduler.locale.labels.button_help = "Help label";
  • Specify the handler of button clicks:
    // any custom code


  • index - (number) the section's index. Zero-based numbering
  • button - (HTMLElement) the HTML element of the button
  • shead - (HTMLElement) the HTML element of the section header
  • sbody - (HTMLElement) the HTML element of the section body

You can define the image used for the button through the following CSS class:

Back to top