ck-ntuh-net/mysite/ck/templates/calendar/index.html

{% extends "base.html" %}
{% load static %}

{% block head %}

  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script> -->

  <link rel="stylesheet" href="https://unpkg.com/fullcalendar@5.1.0/main.css">
  <script src="https://unpkg.com/fullcalendar@5.1.0/main.min.js"></script>

  <script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
  <script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
  

  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.js"></script> -->

  
  <!-- <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' />
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js'></script>
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script> -->

  <!-- <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/gcal.js'></script> -->

  <style type="text/css">
  .c200 { 
    background-color: orange;
    color: black;
  }
  .c310 { 
    background-color: yellow;
    color: black;
  }

  .fc, .fc *, .fc ::before, .fc ::after {
    color: var(--fc-event-text-color, black);
  }


  .fc-scroller1 {
   overflow-y: hidden !important;
  } 

  </style>



  <script type="text/javascript">


  
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          // initialView: 'dayGridMonth',

          // timeZone: 'UTC',

          // editable: true,
//      events: "/get/vevent/",
      eventSources: [
      	// "/get/vevent/",
      	"/vevent/",
//      	"http://www.google.com/calendar/feeds/ntuh.net_64rps4t7k65fpolq4h1opfdstk%40group.calendar.google.com/public/basic",
/*
		{
		    url: 'http://www.google.com/calendar/feeds/ntuh.net_64rps4t7k65fpolq4h1opfdstk%40group.calendar.google.com/private-90f7fc1c87b8958f8422363d36b7e3f9/basic',
		    color: 'violet',   // an option!
		    textColor: '#82EE82' // an option!
		},		
*/
      ],
      // firstDay: 1,
      // firstHour: 9,
      height: "auto",
      // contentHeight: "auto",
      // slotMinutes: 20,
      // minTime: 8,
      // maxTime: 18,
      scrollTime: '08:00:00',
      slotDuration: '00:30:00',
      allDaySlot:false,
      // agendaEventMinHeight: '00:30:00',

    eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.description,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      }); 
    },

    headerToolbar: {
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
        // right: 'month,basicWeek,basicDay'
      },

    //   eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
    //     if (!confirm("Are you sure about this change?")) {
    //         revertFunc();
    //     } else {
    //       $.get('/event/drop/?id='+event.id+'&dayDelta='+dayDelta+'&minuteDelta='+minuteDelta, function(data) {
    // //        $('.result').html(data);
    //         alert(data);
    //       });
    //     }
    //   },

    //         eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
    //     if (!confirm("is this okay?")) {
    //         revertFunc();
    //     } else {
    //       $.get('/event/resize/?id='+event.id+'&dayDelta='+dayDelta+'&minuteDelta='+minuteDelta, function(data) {
    // //        $('.result').html(data);
    //         alert(data);
    //       });
    //     }
    //   }


        });
        calendar.render();
      });


    sources = [
		{
		    dr: '曾漢民',
		    url: '',
		    color: 'red',   // an option!
		    textColor: 'aqua' // an option!
		},
		{
		    dr: '陳敞牧',
		    url: '',
		    color: 'orange',   // an option! FFA500
		    textColor: '#005AFF' // an option!
		},
/*    
		{
		    dr: '蕭輔仁',
		    url: 'https://www.google.com/calendar/feeds/xfuren%40gmail.com/private-26557fba86fefa0d6ee7f662a5a9d399/basic',
		    color: 'yellow',   // an option!
		    textColor: 'blue' // an option!
		},
*/    
		{
		    dr: '陳荔芳',
		    url: '',
		    color: 'green',   // an option!
		    textColor: '#FF7FFF' // an option!
		},
    ];

    $(function() {
        $('#btn-download').on('click', function() {
            var $this = $(this);
            var loadingText = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Loading...';
            if ($(this).html() !== loadingText) {
            $this.data('original-text', $(this).html());
            $this.html(loadingText);
            }
            setTimeout(function() {
            $this.html($this.data('original-text'));
            }, 20000);
        });
    });  
    

    
    {% comment %}
    $(document).ready(function() {

      
      for (var i = 0; i < sources.length; i++) {
      	var s = sources[i];
      	var html = '<div style="background:'+s.color+';color:'+s.textColor+';"><input type="checkbox" class="dr" id="'+i+'" value="'+s.dr+'" /> <label for="cb'+i+'">'+s.dr+'</label></div>';
        $('#dr').append($(html));
      }
      
    $("input.dr").change(function () {
    	  s = sources[parseInt($(this).attr("id"))];
    	  if ($(this).prop("checked")) {
            $('#calendar').fullCalendar( 'addEventSource', s );
    	  } else {
            $('#calendar').fullCalendar( 'removeEventSource', s );
    	  }
       });

      $('#checkAllAuto').click();
        

    }); // $(document).ready
    {% endcomment %}

  </script>
{% endblock %}

{% block title %}
  Calendar
{% endblock %}

{% block leftcolumn %}
  <input type="checkbox" name="checkAllAuto" id="checkAllAuto"/> Check All
  <div id='dr'>
  </div>
  <script type="text/javascript">
  $('#checkAllAuto').change(function() {
    var c = $('#checkAllAuto').prop("checked");
	$("input.dr").each(function(){
      if ($(this).prop("checked") != c) {
		$(this).click();
	  }
	});
  });
  </script>
{% endblock %}

{% block content %}
<div class="d-flex">
  <div class="ml-auto p-2">
      <form class="form-inline">
          <button id="btn-download" name="download" type="submit" class="btn btn-primary mr-1"><span class="material-icons-outlined">download</span>報到機</button>
      </form>
  </div>
</div>

<div id='calendar'></div>
</div>
{% endblock %}