API tools faq
paste
Advertisement
bianchins

FullCalendar

bianchins
Oct 19th, 2012
796
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>FullCalendar </title>
  6.  
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8.  
  9. <link href="template/default/admin/assets/js/ui_css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" media="screen" />
  10. <script type="text/javascript" src="template/default/admin/assets/js/jquery-ui-1.8.4.custom.min.js"></script>
  11.  
  12. <link rel='stylesheet' type='text/css' href='template/default/admin/assets/js/fullcalendar/fullcalendar.css' />
  13. <link rel='stylesheet' type='text/css' href='template/default/admin/assets/js/fullcalendar/fullcalendar.print.css' media='print' />
  14. <script type='text/javascript' src='template/default/admin/assets/js/fullcalendar/fullcalendar.js'></script>
  15. <script type='text/javascript'>
  16. $(document).ready(function() {
  17.     $('#external-events div.external-event').each(function() {
  18.  
  19.     // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  20.     // it doesn't need to have a start or end
  21.     var eventObject = {
  22.         title: $.trim($(this).text()), // use the element's text as the event title
  23.         backgroundColor: $(this).css('background-color')
  24.     };
  25.    
  26.     // store the Event Object in the DOM element so we can get to it later
  27.     $(this).data('eventObject', eventObject);
  28.    
  29.     // make the event draggable using jQuery UI
  30.     $(this).draggable({
  31.         zIndex: 999,
  32.         revert: true,      // will cause the event to go back to its
  33.         revertDuration: 0  //  original position after the drag
  34.     });
  35.    
  36.     });
  37.  
  38. $('#calendar_strutture').fullCalendar({
  39.             header: {
  40.                 left: 'prev,next today',
  41.                 center: 'title',
  42.                 right: 'month' //,agendaWeek,agendaDay
  43.             },
  44.             firstHour: 6,
  45.             firstDay: 1,
  46.             allDaySlot : false,
  47.             timeFormat: 'HH:mm',
  48.             monthNames:['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
  49.             monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
  50.             dayNames: ['Domenica', 'Luned&igrave;', 'Marted&igrave;', 'Mercoled&igrave;', 'Gioved&igrave;', 'Venerd&igrave;', 'Sabato'],
  51.             dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
  52.             buttonText: {
  53.                 prev:     '&nbsp;&#9668;&nbsp;',  // left triangle
  54.                 next:     '&nbsp;&#9658;&nbsp;',  // right triangle
  55.                 prevYear: '&nbsp;&lt;&lt;&nbsp;', // <<
  56.                 nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
  57.                 today:    'Oggi',
  58.                 month:    'Mese',
  59.                 week:     'Settimana',
  60.                 day:      'Giorno'
  61.             },
  62.             columnFormat: {
  63.                 month: 'ddd',    // Mon
  64.                 week: 'd/M ddd', // Mon 9/7
  65.                 day: 'dddd d/M'  // Monday 9/7
  66.             },
  67.             editable: true,
  68.            
  69.             events: {
  70.                 url: 'lista_calendario_strutture.php',
  71.                 cache: true,
  72.                 //color: 'purple',   // a non-ajax option
  73.                 textColor: 'white' // a non-ajax option
  74.             },
  75.             lazyFetching: false,
  76.                    
  77.             eventClick: function(calEvent) {
  78.                 if(confirm("Elimino dal calendario la disponibilita' della struttura per il giorno selezionato?")) {
  79.                     $.ajax({
  80.                       url: "interventi.php?section=calendario_strutture&action=delete",
  81.                       type: 'POST',
  82.                       data: {
  83.                         struttura: calEvent.title,
  84.                         data: calEvent.start.getTime()
  85.                       },
  86.                       success: function(msg){
  87.                         //alert(msg); //debug
  88.                         $('#calendar_strutture').fullCalendar('removeEvents',calEvent.id); 
  89.                       },
  90.                       error: function() {
  91.                         revertFunc();
  92.                       }
  93.                     });
  94.                 }
  95.             },
  96.            
  97.             eventMouseover: function(calEvent) {
  98.                 $(this).find('.fc-event-title').html('<img src="template/default/admin/assets/images/delete.png"/> '+calEvent.title);
  99.             },
  100.            
  101.             eventMouseout: function(calEvent) {
  102.                 $(this).find('.fc-event-title').html(calEvent.title);      
  103.             },
  104.            
  105.             eventDrop: function(calEvent,dayDelta,minuteDelta,allDay,revertFunc) {
  106.                 //Qui ajax per spostamento evento
  107.                 $.ajax({
  108.                   url: "interventi.php?section=calendario_strutture&action=move",
  109.                   type: 'POST',
  110.                   data: {
  111.                     struttura: calEvent.title,
  112.                     movimento: dayDelta,
  113.                     nuova_data: calEvent.start.getTime()
  114.                   },
  115.                   success: function(msg){
  116.                     //alert(msg);
  117.                   },
  118.                   error: function() {
  119.                     revertFunc();
  120.                   }
  121.                 });
  122.             },
  123.             droppable: true,
  124.             drop: function(date, allDay) { // this function is called when something is dropped
  125.            
  126.                 // retrieve the dropped element's stored Event Object
  127.                 var originalEventObject = $(this).data('eventObject');
  128.                
  129.                 // we need to copy it, so that multiple events don't have a reference to the same object
  130.                 var copiedEventObject = $.extend({}, originalEventObject);
  131.                
  132.                 var today = new Date();
  133.                
  134.                 // assign it the date that was reported
  135.                 copiedEventObject.id = today.getTime();
  136.                 copiedEventObject.start = date;
  137.                 copiedEventObject.allDay = allDay;
  138.                
  139.                 //alert(copiedEventObject.title + ' ' + copiedEventObject.start.getTime());
  140.                
  141.                 //Qui ajax per inserimento disponibilita in calendario struttura
  142.                 $.ajax({
  143.                   url: "interventi.php?section=calendario_strutture&action=insert",
  144.                   type: 'POST',
  145.                   data: {
  146.                     struttura: copiedEventObject.title,
  147.                     data: copiedEventObject.start.getTime()
  148.                   },
  149.                   success: function(msg){
  150.                     //alert(msg); //debug
  151.                     // render the event on the calendar
  152.                     $('#calendar_strutture').fullCalendar('renderEvent', copiedEventObject, false);
  153.                   }
  154.                 });
  155.                
  156.             },
  157.             loading: function(bool) {
  158.                 if (bool) $('#loading').show();
  159.                 else $('#loading').hide();
  160.             }
  161.            
  162.         });
  163.  
  164. });
  165. </script>
  166.  
  167. </head>
  168. <body>
  169.  
  170. <div class="container_4">
  171.    
  172.     <div class="grid_4">
  173.         <div class="panel">
  174.             <h2 class="cap">Calendario Strutture</h2>
  175.             <div class="content">
  176.               <div id='wrap' style="width:100%;margin: 0 auto;">
  177.                  <div id='external-events' style="float: left;width: 150px;padding: 0 10px;border: 1px solid #ccc;background: #eee;text-align: left;margin-right:20px;">
  178.                   <h4>Elenco Strutture</h4>
  179.                   <div class='external-event' style="background-color:#0099FF">Struttura Ospedaliera 1</div>  
  180.                   <div class='external-event' style="background-color:#996699">Struttura Ospedaliera 2</div>  
  181.                  <div id='calendar_strutture' style="width: 900px;float:left;"></div>
  182.                  <div style='clear:both'></div>
  183.               </div>
  184.             </div>
  185.         </div>
  186.     </div>
  187. </div>
  188.  
  189. </body>
  190. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!