Initializing Scheduler on a Page

When you develop an application with dhtmlxScheduler, the first thing you need is to initialize or, simply speaking, to display the Scheduler on the page.

To display a basic Scheduler on the page, follow 3 steps:

  1. Include the dhtmlxScheduler code files on the page.
  2. Create a DIV container on the page and define the related DIV containers for its elements.
  3. Initialize dhtmlxScheduler in the newly created container with the init method. As a parameter the method takes an HTML container (or its id) that the Scheduler will be displayed in.
<!DOCTYPE html>
<html>
<head>
   <script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler_material.css" 
        type="text/css">
</head>
<body>
    <!--Container for Scheduler and the standard set of 'divs'-->
   <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab"></div>
            <div class="dhx_cal_tab" name="week_tab" ></div>
            <div class="dhx_cal_tab" name="month_tab"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
   </div>
   <script type="text/javascript">
     scheduler.init("scheduler_here");
</script> </body> </html>

Scheduler initialization

Related sample:  Basic initialization

Required code files

The required code files are:

<script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler_material.css" 
        type="text/css">

Let's quickly explore the structure of the dhtmlxScheduler package to find out where to look for the files.

  • sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging.

Note that the Trial version of the Scheduler library doesn't contain the sources folder.

  • samples - the code samples.
  • docs - the full documentation of the component.
  • codebase - the packed code files of the library. These files have much smaller size and intended for use in production. In your apps you need to use files from this folder.

Scheduler sizing

Scheduler takes up the whole size of its container element (scheduler_here div in the above example) without expanding it. Which means that if you don't specify the container height or set it to 0, scheduler will also have zero height and won't be displayed.

In our samples we usually make scheduler full-screen by giving 100% width and height to both the document body and scheduler container element:

<style>
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style> </head> <body> <div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;"/>

It can easily go wrong if you place the scheduler_here element into a div with default sizes:

<style>
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style> </head> <body> <div class="outer_container"> <div id="scheduler_here" class="dhx_cal_container" style="width:100%;height:100%;">

Scheduler won't be correctly displayed in this case, because "scheduler_here" is set to 100% of its parent, and the size of its parent is not specified.

If you use relative sizes (%, percents) for the .dhx_cal_container element, make sure that its parent element also has some height set. Otherwise, the resulting height might be zero and scheduler won't be displayed.

Or, you can use different units for the main scheduler div sizes. The following elements will have expected sizes regardless of the styles of outer elements:

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100vh;">

or:

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:800px;">
Back to top