Check documentation for the latest version 6.0 of dhtmlxSuite Step 6. Create a View for the Scheduler DHTMLX Docs

Step 6. Create a View for the Scheduler

The next step is to create a view for the scheduler. Once again, we will use a standard code to initialize the component.

If after completing the step, you will run webhost/cakephp_dhtmlx/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

For a deeper learning of dhtmlxScheduler initialization, read:

To configure the View object for the scheduler:
  1. Add a new folder to the "Template " folder and name it "Scheduler "
  2. In the "Scheduler " subfolder create a file and name it "scheduler.ctp "
  3. Open the "scheduler.ctp " file and add the following code there:

    "Template/Scheduler/scheduler.ctp" file

    <!DOCTYPE html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script src="lib/dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
        <link rel="stylesheet" href="lib/dhtmlxScheduler/codebase/dhtmlxscheduler.css">
    </head>
     
    <body>
        <div id="scheduler_here" class="dhx_cal_container" 
          style='width:800px; height:600px;'>
            <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" style="right:204px;"></div>
                <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
                <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
            </div>
            <div class="dhx_cal_header">
            </div>
            <div class="dhx_cal_data">
            </div>
        </div>
     
    <script type="text/javascript" charset="utf-8">
        document.body.onload = function() {
            scheduler.init('scheduler_here',new Date(2010,7,1),"month");
            scheduler.setLoadMode("month");
            // refers to the 'scheduler_data' action 
            scheduler.load("./scheduler_data");
            // refers to the 'scheduler_data' action as well 
            var dp = new dataProcessor("./scheduler_data");
            dp.init(scheduler);
        };
    </script> </body>
Back to top