jqxsSchedulerin window

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<button id="bt_Open">Open</button>

<div id="window" class='hidden'>
    <div id="windowHeader">Emploi du temps</div>

    <div id="windowContent">
         <div id="scheduler"></div>
    </div>
</div>

<div id="dialogAppointment" class='hidden'>
  <div id="windowHeader">appointment</div>

  <div id="windowContent">
         
  </div>
  
 </div>

JavaScript

$('#window').jqxWindow({autoOpen: false,
        width:'70%',
        height:'70%',
        isModal:true,
        closeButtonSize: 32
                });
                
$('#dialogAppointment').jqxWindow({autoOpen: false,
        width:'50%',
        height:'50%',
        isModal:true,
        closeButtonSize: 32
                });

 $('#bt_Open').click(function()
        {
             $('#window').jqxWindow('open');
        });
        
        $("#scheduler").on('appointmentDoubleClick', function(event)
        {
            // double clic sur créneau existant ==> on ouvre la dialogue
            let args = event.args;
            appointment = args.appointment;

            iIdappointment = appointment.id;

             $('#dialogAppointment').jqxWindow('open');
        });
        
                $("#scheduler").on('editRecurrenceDialogOpen', function(event)
        {
            let args = event.args;
            let dialog = args.dialog;
            appointment = args.appointment;
            $(".jqx-window").hide();
        });
        
var changedAppointments;

var appointments = new Array();

var appointment1 = {
  id: "id1",
  subject: "maths",
  resourceId: "gymnase",
  start: "2020-09-28 08:00",
  end: "2020-09-28 10:00",
  recurrenceException:"",
  recurrencePattern: 'FREQ=WEEKLY;BYDAY=MO;INTERVAL=1;UNTIL=20201018T235959Z',
}

var appointment2 = {
  id: "id2",
  subject: "sport",
  resourceId: "stade",
  start: "2020-09-28 10:00",
  end: "2020-09-28 12:00",
  recurrenceException:"",
  recurrencePattern: 'FREQ=WEEKLY;BYDAY=MO;INTERVAL=1;UNTIL=20201017T235959Z',
}

var appointment3 = {
  id: "id3",
  subject: "physics",
  resourceId: "room 1",
  start: "2020-09-29 08:00",
  end: "2020-09-29 10:00",
  recurrenceException:"",
  recurrencePattern: 'FREQ=WEEKLY;BYDAY=TU;INTERVAL=1;UNTIL=20201018T235959Z',
}

var appointment4 = {
  id: "id4",
  subject: "french",
  resourceId: "room 2",
  start: "2020-09-29 10:00",
  end: "2020-09-29 12:00",
 ...