Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Peet on Jul 14, 2009 06:45
open dhtmlx forum
How can a use the Calendar and Scheduler

Hello,

how can a use the Calendar and Scheduler on the same site?
when i load the Calendar the Scheduler will not work.

Thanks
Answer posted by Alex (support) on Jul 14, 2009 08:42

Hello, 

there shouldn't be any problems with using both components. Please, check that libraries for scheduler and calendar are correctly included. 

If the issue still occurs, please provide the initialization code for both components.

Answer posted by Peet on Jul 20, 2009 01:56
Hello,

i think all libraries correctly included, here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="_style.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_blue.css">

<script>
      window.dhx_globalImgPath="../../codebase/imgs/";
</script>
  <script  src="../../codebase/dhtmlxcommon.js"></script>
  <script  src="../../codebase/dhtmlxcalendar.js"></script>
  <script  src="../../codebase/dhtmlxmenu.js"></script>
      <script>
    window.onload = function () {
    var mDCal;
        mDCal = new dhtmlxDblCalendarObject('dhtmlxDblCalendar', false, {isMonthEditable: true, isYearEditable: true});
        mDCal.setYearsRange(1980, 2020);
        mDCal.setDateFormat("%d/%m/%Y");
        mDCal.setDate("06/01/2008","15/01/2008")
        mDCal.draw();
    }
    </script>
</head>

<script src="../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
   
<style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
</style>

<script type="text/javascript" charset="utf-8">
    function init() {
       
        scheduler.config.xml_date="%Y-%m-%d %H:%i";
        scheduler.config.lightbox.sections=[   
            {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
            {name:"location", height:43, type:"textarea", map_to:"details" },
            {name:"time", height:72, type:"time", map_to:"auto"}
        ]
        scheduler.config.first_hour=0;
        scheduler.locale.labels.section_location="Location";
        scheduler.config.details_on_create=true;
        scheduler.config.details_on_dblclick=true;


   
        scheduler.init('scheduler_here',null,"day");
        scheduler.load("events.php?uid="+scheduler.uid());
       
        var dp = new dataProcessor("events.php");
        dp.init(scheduler);
    }
</script>

<body onload="init();">
<div id="container">
    <div id="head">
<div id="menuObj"></div>
</div>
    <div id="content">
        <div class="cols">
            <div class="col1">
                <div style="padding:10px;position:relative;z-index:4;">
        <?php include("dbcalendar.php"); ?><br>
        <?php include("fastinput.php"); ?>
                </div>
            </div>
            <div class="col2">
                <div style="padding:10px;">
                    <!-- php site include -->
                    <!-- content include -->
                </div>
            </div>
        </div>
        <div class="col3">
            <div style="padding:10px;">
      <?php include("firm.php"); ?><br>
      <?php include("fastinfo.php"); ?>
            </div>
        </div>
        <div style="line-height:10px;clear:both;">&nbsp;</div>
    </div>
      <script>
    var menu = new dhtmlXMenuObject("menuObj");
    menu.setImagePath("codebase/imgs/");
    menu.setIconsPath("images/");
    // initing
    menu.addNewSibling(null, "erfassen", "Erfassen", false);
        //
    menu.addNewChild("erfassen", 0, "capture", "Arbeitsstunden", false);
        menu.setHotKey("capture", "Ctrl+A");
        //
    menu.addNewChild("erfassen", 2, "drives", "Fahrten", false);
        menu.setHotKey("drives", "Ctrl+F");
        //
        menu.addNewChild("erfassen", 3, "missing_periods", "Fehlzeiten", false);
    menu.setHotKey("missing_periods", "Ctrl+FE");
    //
        menu.addNewChild("erfassen", 4, "correction", "Stapelkorrektur", false);
        menu.setHotKey("correction", "Ctrl+S");
       //
    menu.addNewSibling("erfassen", "favoriten", "Favoriten", false);
        //
        menu.addNewChild("favoriten", 0, "activate_favorites", "Favoritenliste aktivieren", false);
        menu.setHotKey("activate_favorites", "Ctrl+FA");
        //
        menu.addNewChild("favoriten", 2, "manage_favorites", "Favoritenliste verwalten...", false);
        menu.setHotKey("manage_favorites", "Ctrl+FV");
        //
    menu.addNewSibling("favoriten", "ansicht", "Ansicht", false);
</script>
</body>
</html>
Answer posted by Alex (support) on Jul 20, 2009 03:46

Hello,

the issue is caused by using two onload event handlers.

Try to place the calendar intialization code to the init() function and delete  window.onload = function () {..} handler.

Answer posted by Peet on Jul 20, 2009 04:10
Hello,

is the following code correct?

<script>
    function init() {
    var mDCal;
        mDCal = new dhtmlxDblCalendarObject('dhtmlxDblCalendar', false, {isMonthEditable: true, isYearEditable: true});
        mDCal.setYearsRange(1980, 2020);
        mDCal.setDateFormat("%d/%m/%Y");
        mDCal.setDate("06/01/2008","15/01/2008")
        mDCal.draw();
    }
</script>
Answer posted by Alex (support) on Jul 20, 2009 04:38
Yes, it is. But it seems that you've missed the scheduler initialization here
Answer posted by Peet on Jul 20, 2009 04:44
Here is the Scheduler initialization:

<script type="text/javascript" charset="utf-8">
    function init() {
       
        scheduler.config.xml_date="%Y-%m-%d %H:%i";
        scheduler.config.lightbox.sections=[   
            {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
            {name:"location", height:43, type:"textarea", map_to:"details" },
            {name:"time", height:72, type:"time", map_to:"auto"}
        ]
        scheduler.config.first_hour=8;
        scheduler.config.last_hour=18;
        scheduler.locale.labels.section_location="Location";
        scheduler.config.details_on_create=true;
        scheduler.config.details_on_dblclick=true;


   
        scheduler.init('scheduler_here',null,"day");
        scheduler.load("events.php?uid="+scheduler.uid());
       
        var dp = new dataProcessor("events.php");
        dp.init(scheduler);
    }
</script>

<body onload="init();">
Answer posted by Alex (support) on Jul 20, 2009 06:37

So, the full code should like as follows:

function init() {

var mDCal;
  mDCal = new dhtmlxDblCalendarObject('dhtmlxDblCalendar', false, {isMonthEditable: true, isYearEditable: true});
  mDCal.setYearsRange(1980, 2020);
  mDCal.setDateFormat("%d/%m/%Y");
  mDCal.setDate("06/01/2008","15/01/2008")
  mDCal.draw();
   
  scheduler.config.xml_date="%Y-%m-%d %H:%i";
  scheduler.config.lightbox.sections=[  
  {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
  {name:"location", height:43, type:"textarea", map_to:"details" },
  {name:"time", height:72, type:"time", map_to:"auto"}
  ]
  scheduler.config.first_hour=8;
  scheduler.config.last_hour=18;
  scheduler.locale.labels.section_location="Location";
  scheduler.config.details_on_create=true;
  scheduler.config.details_on_dblclick=true;


   
  scheduler.init('scheduler_here',null,"day");
  scheduler.load("events.php?uid="+scheduler.uid());
   
  var dp = new dataProcessor("events.php");
  dp.init(scheduler);
  }

Answer posted by Peet on Jul 22, 2009 05:32
Thanks, it works ;-)

My last question is it possible to show the schedular only from monday till friday?

Regards
Answer posted by Alex (support) on Jul 22, 2009 06:22

It is possible. The code example is attached

Attachments (1)
sample_workweek.zip1.04 Kb
Answer posted by Peet on Jul 27, 2009 02:39
Thanks the example works.can i start with woorkweek:

scheduler.init('scheduler_here',null,"weekweek");

will not work.

Regards
Answer posted by Support on Jul 27, 2009 03:22
Please check Grid fails to init with custom view activated at
http://dhtmlx.com/docs/products/dhtmlxScheduler/doc/dhtmlxscheduler___faq.html#sch_problems

Answer posted by Peet on Jul 27, 2009 10:06
Thanks it works ;-) very nice support.

I hope this is my last problem, i have an error in firebug an internet explorer:

(Firebug)
this.daysPan.className = "dxcaldays";th...ck = function () {if (self.isVisible())\n (Line 50)

(Internet Explorer)
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727)
Timestamp: Mon, 27 Jul 2009 17:03:21 UTC

ERROR: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Zeichen: 0
Code: 0
Answer posted on Jul 27, 2009 10:18
There is no such string as this.daysPan inside sources of dhtmlxScheduler, so problem must be caused by some other component, used on the page. 

>>Unable to modify the parent container element before the child element is closed
If problem still related to scheduler - try to move initialization code to the onLoad handler of the page - it must resolve the issue.