API tools faq
paste
Guest User

Example Mysql Jquery week calendar (1)

a guest
Mar 23rd, 2011
2,220
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 15.38 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.     require_once("php/config.php");
  3.     require_once("php/sesion.php");
  4.     require_once("php/functions.php");
  5.     require_once("php/bd.php");
  6. ?>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  8. <html><head><title><?php echo $GLOBALS['cfg']['app_name'].' - '.$GLOBALS['cfg']['department']; ?></title>
  9. <head>
  10. <?php output_html_header(); ?>
  11. <link rel='stylesheet' type='text/css' href='js/jquery.weekcalendar.css' />
  12. <script type='text/javascript' src='js/jquery.weekcalendar.js'></script>
  13. <link rel='stylesheet' type='text/css' href='js/calendar.css' />
  14. </head>
  15. <body>
  16. <?php
  17. output_cabecera();
  18. output_menu();
  19. ?>
  20. <div style="margin-left:20px; margin-right: 20px;">
  21.     <div id='calendar'></div>
  22. </div>
  23. <div id="event_edit_container">
  24.         <form>
  25.             <input type="hidden" />
  26.            
  27.                     <br><span><b>D&iacute;a:</b> </span><span class="date_holder"></span> <br><br>
  28.                    
  29.                     <span class="usu_holder"></span>
  30.                
  31.                     <b>Hora inicio:</b> <br><select name="start"><option value="">Selecciona hora de inicio</option></select><br><br>
  32.                
  33.                     <b>Hora fin:</b> <br><select name="end"><option value="">Selecciona hora de fin</option></select><br><br>
  34.                
  35.                     <b>Motivo:</b> <br><input type="text" name="title" /><br><br>
  36.                
  37.                     <b>Observaciones:</b> <br><textarea name="body"></textarea>
  38.                
  39.         </form>
  40.     </div>
  41. <script type="text/javascript">$(document).ready(function() {
  42.    var $calendar = $('#calendar');
  43.    //var id = 10;
  44.  
  45.    $calendar.weekCalendar({
  46.       timeslotsPerHour : 2,/*1*/
  47.       firstDayOfWeek : 1,
  48.       businessHours :{start: 8, end: 18, limitDisplay: true },
  49.       daysToShow : 5,
  50.       timeFormat: 'H:i',
  51.       dateFormat: 'd M, Y',
  52.       shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
  53.       longMonths: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  54.       shortDays: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
  55.       longDays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  56.       buttonText: {today: '&nbsp;&nbsp;Hoy&nbsp;&nbsp;', lastWeek : '&nbsp;&nbsp;<&nbsp;&nbsp;', nextWeek : '&nbsp;&nbsp;>&nbsp;&nbsp;'},
  57.       newEventText: 'Nueva Reserva',
  58.       use24Hour: true,
  59.       timeslotHeight: 20,/*45*/
  60.       allowCalEventOverlap : false,
  61.       overlapEventsSeparate: false,
  62.       defaultEventLength: 2,
  63.       height : function($calendar) {
  64.         //return $calendar[0].offsetHeight; //para height definido en style del div
  65.          return 495;
  66.       },
  67.       eventRender : function(calEvent, $event) {
  68.          if (calEvent.end.getTime() < new Date().getTime()) {
  69.             $event.css("backgroundColor", "#aaa");
  70.             $event.find(".wc-time").css({
  71.                "backgroundColor" : "#999",
  72.                "border" : "1px solid #888"
  73.             });
  74.          }
  75.       },
  76.       draggable : function(calEvent, $event) {
  77.          //return calEvent.readOnly != true;
  78.          return false;
  79.       },
  80.       resizable : function(calEvent, $event) {
  81.          //return calEvent.readOnly != true;
  82.          return false;
  83.       },
  84.       eventNew : function(calEvent, $event) {
  85.          var $dialogContent = $("#event_edit_container");
  86.          resetForm($dialogContent);
  87.          var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
  88.          var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
  89.          var titleField = $dialogContent.find("input[name='title']");
  90.          var bodyField = $dialogContent.find("textarea[name='body']");
  91.  
  92.          $('.usu_holder').html('');
  93.          
  94.          $dialogContent.dialog({
  95.             modal: true,
  96.             title: "Nueva reserva de sala",
  97.             close: function() {
  98.                $dialogContent.dialog("destroy");
  99.                $dialogContent.hide();
  100.                $('#calendar').weekCalendar("removeUnsavedEvents");
  101.             },
  102.             buttons: {
  103.                Cancelar : function() {
  104.                   $dialogContent.dialog("close");
  105.                },
  106.                Guardar : function() {
  107.                 calEvent.start = new Date(startField.val());
  108.                 calEvent.end = new Date(endField.val());
  109.                 calEvent.title = titleField.val();
  110.                 calEvent.body = bodyField.val();
  111.                
  112.                 ret = $.ajax({type: 'GET',
  113.                 url: 'calendar.php',
  114.                 data: 'op=add_event&start='+Math.round(calEvent.start.getTime()/1000)
  115.                         +'&end=' + Math.round(calEvent.end.getTime()/1000)
  116.                         + '&title=' + calEvent.title + '&body=' + calEvent.body,
  117.                 cache: false,
  118.                 async: false
  119.                 }).responseText;
  120.                 var atmp = ret.split('|');
  121.                 ret = atmp[0];
  122.                 calEvent.usermail = atmp.length > 1 ? atmp[1] : 'desconocido';
  123.                
  124.                 if (ret == 'TAKEN') {//cojido x otro usuario
  125.                     $dialogContent.dialog("close");
  126.                     $calendar.weekCalendar('refresh');//refrescar calendario pa q se vea el que lo cojio
  127.                     var msg = 'El evento no se ha podido guardar ya que se solapa con otro ya existente, esto';
  128.                     msg += ' puede deberse a que un usuario haya insertado dicho evento desde la ultima vez'
  129.                     msg += ' que usted actualizo la vista.';
  130.                     jalert(msg,'Solapamiento de evento',true,true);
  131.                     return;
  132.                 } else if (ret == '0') {
  133.                     $dialogContent.dialog("close");
  134.                     jalert('Ha habido un error y el evento no se ha insertado','Error al insertar evento',true,true);
  135.                     return;
  136.                 }
  137.                 //Notificaciones de correo
  138.                 $.ajax({type: 'GET', url: 'calendar.php',
  139.                 data: 'opmail=1&op=add_event&start='+Math.round(calEvent.start.getTime()/1000)
  140.                         +'&end=' + Math.round(calEvent.end.getTime()/1000)
  141.                         + '&title=' + calEvent.title + '&body=' + calEvent.body,
  142.                 cache: false, async: true});
  143.                   //todo bien
  144.                   calEvent.id = ret; //id
  145.                   //id++;
  146.                   $calendar.weekCalendar("removeUnsavedEvents");
  147.                   $calendar.weekCalendar("updateEvent", calEvent);
  148.                   $dialogContent.dialog("close");
  149.                }
  150.             }
  151.          }).show();
  152.  
  153.          $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
  154.          setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
  155.  
  156.       },
  157.       eventDrop : function(calEvent, $event) {
  158.       },
  159.       eventResize : function(calEvent, $event) {
  160.       },
  161.       eventClick : function(calEvent, $event) {
  162.  
  163.          if (calEvent.readOnly) {
  164.             return;
  165.          }
  166.  
  167.          var $dialogContent = $("#event_edit_container");
  168.          resetForm($dialogContent);
  169.          var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
  170.          var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
  171.          var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
  172.          var bodyField = $dialogContent.find("textarea[name='body']");
  173.          bodyField.val(calEvent.body);
  174.          var telefldap = $.ajax({type: 'GET',
  175.                     url: 'calendar.php',
  176.                     data: 'op=get_ldaptelefono&user='+ calEvent.usermail.split('@')[0],
  177.                     cache: false,
  178.                     async: false
  179.                     }).responseText;
  180.         $('.usu_holder').html('<b>Reservado por:</b><br><a href="mailto:' + calEvent.usermail + '">'+calEvent.usermail+'</a><br>' + telefldap + '<br><br>');
  181.          
  182.          $dialogContent.dialog({
  183.             modal: true,
  184.             title: "Editar - " + calEvent.title,
  185.             close: function() {
  186.                $dialogContent.dialog("destroy");
  187.                $dialogContent.hide();
  188.                $('#calendar').weekCalendar("removeUnsavedEvents");
  189.             },
  190.             buttons: {
  191.                 Cancelar : function() {
  192.                   $dialogContent.dialog("close");
  193.                },
  194.                 "Eliminar" : function() {
  195.                     ret = $.ajax({type: 'GET',
  196.                     url: 'calendar.php',
  197.                     data: 'op=delete_event&evid='+ calEvent.id,
  198.                     cache: false,
  199.                     async: false
  200.                     }).responseText;
  201.                     var arr = ret.split('|');
  202.                     ret = arr[0];
  203.                     deluser = arr[1];
  204.                     if (ret != '1') {
  205.                         $dialogContent.dialog("close");
  206.                         jalert('Ha habido un error y no se ha podido borrar el evento ' + ret,'No se ha podido borrar el evento',true,true);
  207.                         return;
  208.                     }
  209.                     //Notificaciones de correo
  210.                     $.ajax({type: 'GET', url: 'calendar.php',
  211.                         data: 'opmail=1&op=delete_event&evid='+ calEvent.id
  212.                         +'&start=' + Math.round(calEvent.start.getTime()/1000) + '&body=' + calEvent.body
  213.                         + '&end=' + Math.round(calEvent.end.getTime()/1000) + '&title=' + calEvent.title
  214.                         + '&user=' + deluser, cache: false, async: true});
  215.                   $calendar.weekCalendar("removeEvent", calEvent.id);
  216.                   $dialogContent.dialog("close");
  217.                },
  218.                Guardar : function() {
  219.                     var tempEvent = {start: new Date(startField.val()), end: new Date(endField.val()), title: titleField.val(), body: bodyField.val()};
  220.                     ret = $.ajax({type: 'GET',
  221.                     url: 'calendar.php',
  222.                     data: 'op=update_event&start='+Math.round(tempEvent.start.getTime()/1000)
  223.                         +'&end=' + Math.round(tempEvent.end.getTime()/1000) + '&evid=' + calEvent.id
  224.                         + '&title=' + tempEvent.title + '&body=' + tempEvent.body,
  225.                     cache: false,
  226.                     async: false
  227.                     }).responseText;
  228.                     if (ret == 'TAKEN') {//cojido x otro usuario
  229.                         $dialogContent.dialog("close");
  230.                         $calendar.weekCalendar('refresh');//refrescar calendario pa q se vea el que lo cojio
  231.                         var msg = 'El evento no se ha podido actualizar ya que se solapa con otro ya existente, esto';
  232.                         msg += ' puede deberse a que un usuario haya insertado dicho evento desde la ultima vez'
  233.                         msg += ' que usted actualizo la vista.';
  234.                         jalert(msg,'Solapamiento de evento',true,true);
  235.                         return;
  236.                     } else if (ret != '1') {
  237.                         $dialogContent.dialog("close");
  238.                         jalert('Ha habido un error y es posible que los datos no se hayan guardado.Refresque la vista.','Error al actualizar evento',true,true);
  239.                         return;
  240.                     }
  241.                     //Notificaciones de correo
  242.                     $.ajax({type: 'GET', url: 'calendar.php',
  243.                     data: 'opmail=1&op=update_event&start='+Math.round(tempEvent.start.getTime()/1000)
  244.                         +'&end=' + Math.round(tempEvent.end.getTime()/1000) + '&evid=' + calEvent.id
  245.                         + '&title=' + tempEvent.title + '&body=' + tempEvent.body,
  246.                     cache: false, async: true});
  247.                   //todo bien
  248.                   calEvent.start = new Date(startField.val());
  249.                   calEvent.end = new Date(endField.val());
  250.                   calEvent.title = titleField.val();
  251.                   calEvent.body = bodyField.val();
  252.  
  253.                   $calendar.weekCalendar("updateEvent", calEvent);
  254.                   $dialogContent.dialog("close");
  255.                }
  256.             }
  257.          }).show();
  258.  
  259.          var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
  260.          var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
  261.          $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
  262.          setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
  263.          $(window).resize().resize(); //fixes a bug in modal overlay size ??
  264.  
  265.       },
  266.       eventMouseover : function(calEvent, $event) {
  267.       },
  268.       eventMouseout : function(calEvent, $event) {
  269.       },
  270.       noEvents : function() {
  271.  
  272.       },
  273.       data: 'calendar.php?op=get_events'
  274.       /*data : function(start, end, callback) {
  275.          callback(getEventData());
  276.       }*/
  277.    });
  278.  
  279.    function resetForm($dialogContent) {
  280.       $dialogContent.find("input").val("");
  281.       $dialogContent.find("textarea").val("");
  282.    }
  283.  
  284.    /*function getEventData() {
  285.       var year = new Date().getFullYear();
  286.       var month = new Date().getMonth();
  287.       var day = new Date().getDate();
  288.  
  289.       return {
  290.          events : [
  291.             {
  292.                "id":1,
  293.                "start": new Date(year, month, day, 12),
  294.                "end": new Date(year, month, day, 13, 30),
  295.                "title":"Lunch with Mike",
  296.                "body":"Reunión de amigotes de mike"
  297.             },
  298.             {
  299.                "id":2,
  300.                "start": new Date(year, month, day, 14),
  301.                "end": new Date(year, month, day, 14, 45),
  302.                "title":"Dev Meeting"
  303.             },
  304.             {
  305.                "id":3,
  306.                "start": new Date(year, month, day + 1, 17),
  307.                "end": new Date(year, month, day + 1, 17, 45),
  308.                "title":"Hair cut"
  309.             },
  310.             {
  311.                "id":4,
  312.                "start": new Date(year, month, day - 1, 8),
  313.                "end": new Date(year, month, day - 1, 9, 30),
  314.                "title":"Team breakfast"
  315.             },
  316.             {
  317.                "id":5,
  318.                "start": new Date(year, month, day + 1, 14),
  319.                "end": new Date(year, month, day + 1, 15),
  320.                "title":"Product showcase"
  321.             },
  322.             {
  323.                "id":6,
  324.                "start": new Date(year, month, day, 10),
  325.                "end": new Date(year, month, day, 11),
  326.                "title":"I'm read-only",
  327.                readOnly : true
  328.             }
  329.  
  330.          ]
  331.       };
  332.    }*/
  333.  
  334.  
  335.    /*
  336.     * Sets up the start and end time fields in the calendar event
  337.     * form for editing based on the calendar event being edited
  338.     */
  339.    function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
  340.  
  341.       for (var i = 0; i < timeslotTimes.length; i++) {
  342.          var startTime = timeslotTimes[i].start;
  343.          var endTime = timeslotTimes[i].end;
  344.          var startSelected = "";
  345.          if (Math.round(startTime.getTime()/1000) === Math.round(calEvent.start.getTime()/1000)) { //NELSON
  346.             startSelected = "selected=\"selected\"";
  347.          }
  348.          var endSelected = "";
  349.          if (Math.round(endTime.getTime()/1000) === Math.round(calEvent.end.getTime()/1000)) {  //NELSON
  350.             endSelected = "selected=\"selected\"";
  351.          }
  352.          $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
  353.          $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
  354.  
  355.       }
  356.       $endTimeOptions = $endTimeField.find("option");
  357.       $startTimeField.trigger("change");
  358.    }
  359.  
  360.    var $endTimeField = $("select[name='end']");
  361.    var $endTimeOptions = $endTimeField.find("option");
  362.  
  363.    //reduces the end time options to be only after the start time options.
  364.    $("select[name='start']").change(function() {
  365.       var startTime = $(this).find(":selected").val();
  366.       var currentEndTime = $endTimeField.find("option:selected").val();
  367.       $endTimeField.html(
  368.             $endTimeOptions.filter(function() {
  369.                return startTime < $(this).val();
  370.             })
  371.             );
  372.  
  373.       var endTimeSelected = false;
  374.       $endTimeField.find("option").each(function() {
  375.          if ($(this).val() === currentEndTime) {
  376.             $(this).attr("selected", "selected");
  377.             endTimeSelected = true;
  378.             return false;
  379.          }
  380.       });
  381.  
  382.       if (!endTimeSelected) {
  383.          //automatically select an end date 2 slots away.
  384.          $endTimeField.find("option:eq(1)").attr("selected", "selected");
  385.       }
  386.  
  387.    });
  388. }); //end document.ready()
  389. </script>
  390. <br>
  391. <?php output_pie(); ?>
  392. </body>
  393. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!