templates/pages/calendar.html.twig line 1

Open in your IDE?
  1. {# @var page \App\Controller\Objects\Page #}
  2. {% extends 'base.html.twig' %}
  3. {% block customcss %}
  4.     {{ parent() }}
  5.     <link rel="stylesheet" type="text/css" href="/assets/custom/fullcalendar/fullcalendar.min.css" />
  6.     <link rel="stylesheet" type="text/css" href="/assets/custom/css/fullcalendar-custom.min.{{ app.request.server.get('APP_PREVCACHE') }}.css" />
  7. {% endblock %}
  8.     {% block og %}
  9.         <meta property="og:url"         content="{{ app.request.server.get('APP_URL') }}/kalendar" />
  10.         <meta property="og:type"        content="website" />
  11.         <meta property="og:title"       content="Kalendář akcí" />
  12.         <meta property="og:description" content="Přehled kulturních a sportovních akcí v Chomutově." />
  13.         <meta property="og:image"       content="{{ app.request.server.get('APP_URL') }}/assets/custom/img/og.png" />
  14.     {% endblock %}
  16. {% block body %}
  17.     <div class=" ms-hero-page ms-hero-bg-info mb-6" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ page.picture.small }}');">
  18.         {% if pageinfo.info != '' %}
  19.             <div class="container" style="position: relative; top: -80px">
  20.                 <div id="id-header-news">
  21.                     <i class="fa fa-info-circle"></i>
  22.                     <div class="marquee">
  23.                         <div class="marquee-content">{{ pageinfo.info|raw }}</div>
  24.                     </div>
  25.                 </div>
  26.             </div>
  27.         {% endif %}
  28.         <div class="text-center color-white mt-6 mb-6 index-1">
  29.             <h1>{{ page.title }}</h1>
  30.             <p class="lead lead-lg mb-4">Přehled kulturních a sportovních akcí v Chomutově</p>
  31.             <a href="javascript:void(0)" id="id-btn-publish" class="btn btn-object">zveřejnení akce</a>
  32.         </div>
  33.     </div>
  34.     <div class="container" style="margin-top: -110px">
  35.     <div class="row">
  36.         <div class="col-lg-12">
  37.             <article class="card card-primary wow zoomInRight animation-delay-1 mb-4" style="visibility: visible; animation-name: zoomInRight;">
  38.                 <div class="card-body overflow-hidden card-body-big">
  39.                     <div class="content" style="position: relative;">
  40.                         <div class="calendar-loader ms-preload">
  41.                             <div id="status">
  42.                                 <div class="spinner">
  43.                                     <div class="dot1"></div>
  44.                                     <div class="dot2"></div>
  45.                                 </div>
  46.                             </div>
  47.                         </div>
  48.                         <div class="c-row text-center" style="padding-bottom: 30px;">
  49.                             <div class="form-group row justify-content-end">
  50.                                 <h4 for="id-object-select" class="col-lg-1 mt-1">Filtr</h4>
  51.                                 <div class="col-lg-3">
  52.                                          <select id="id-object-select" class="form-control selectpicker" data-dropup-auto="false" tabindex="-98">
  53.                                              <option value="0" data-link="">Vše</option>
  54.                                              <option value="3" data-link="aquasvet">Aquasvět</option>
  55.                                              <option value="2" data-link="fotbalovy-stadion">Fotbalový stadion</option>
  56.                                              <option value="4" data-link="kino-svet">Kino Svět</option>
  57.                                              <option value="19" data-link="letni-kino">Letní kino</option>
  58.                                              <option value="7" data-link="mestska-sportovni-hala">Městská sportovní hala</option>
  59.                                              <option value="5" data-link="mestske-divadlo">Městské divadlo</option>
  60.                                              <option value="1" data-link="zimni-stadion-rocknet-arena">Rocknet Aréna - Zimní stadion</option>
  61.                                              <option value="26" data-link="zimni-stadion-treninkova-hala">Zimní stadion - Tréninková hala</option>
  62.                                          </select>
  63.                                 </div>
  64.                             </div>
  65.                         </div>
  66.                         <div id="id-calendar" class="fc fc-unthemed fc-ltr" style="min-height: 1000px">
  67.                         </div>
  68.                     </div>
  69.                 </div>
  70.             </article>
  71.         </div>
  72.     </div>
  73. </div>
  74. {% endblock %}
  75. {% block javascripts %}
  76.     {{ parent() }}
  77.     <script src="/assets/custom/fullcalendar/lib/jquery-ui.min.js"></script>
  78.     <script src="/assets/custom/fullcalendar/lib/moment.min.js"></script>
  79.     <script src="/assets/custom/fullcalendar/fullcalendar.min.js"></script>
  80.     <script src='/assets/custom/fullcalendar/locale/cs.js'></script>
  81.     <script>
  82.         $(document).ready(function() {
  83.             var id = parseInt($('#id-object-select').val(), 10);
  84.             if (isNaN(id)) {
  85.                 id = 0;
  86.             }
  87.             if (id == 0) {
  88.                 var so = localStorage.getItem('selected-object');
  89.                 if (parseInt(so, 10) > 0) {
  90.                     id = so;
  91.                     $('.selectpicker').selectpicker('val', id);
  92.                 }
  93.             }
  94.             LoadCalendar(id);
  95.             $('#id-object-select').change(function() {
  96.                 ShowLoader(true);
  97.                 setTimeout(function() {
  98.                     $('#id-calendar').fullCalendar('destroy');
  99.                     localStorage.setItem('selected-object', $('#id-object-select').val());
  100.                     LoadCalendar($('#id-object-select').val());
  101.                 }, 500);
  102.             });
  104.             $('#id-btn-publish').click(function() {
  105.                 let link = $('#id-object-select').find(":selected").data('link');
  106.                 if (link=='') {
  107.                     toastr.error('vyberte objekt ve filtru');
  108.                 }
  109.                 else {
  110.                     location.href = '/'+link+'/zverejneni-akce';
  111.                 }
  112.             });
  113.         });
  115.         function GoTo(location){
  116.             document.location.href = location;
  117.         }
  119.         function LoadCalendar(object_id) {
  120.             var params = '';
  121.             if (object_id > 0) {
  122.                 params = '?object=' + object_id;
  123.             }
  124.             $('#id-calendar').fullCalendar({
  125.                 header: {
  126.                     left: 'prev,next today',
  127.                     center: 'title',
  128.                     right: 'month agendaWeek agendaDay',
  129.                 },
  130.                 locale: 'cs',
  131.                 editable: false,
  132.                 eventClick: function(event) {
  133.                     GoTo(event.url);
  134.                     return false;
  135.                 },
  136.                 events: {
  137.                     url: '/kalendar-data' + params
  138.                 },
  139.                 loading: function(loading) {
  140.                     if (!loading) {
  141.                         ShowLoader(false);
  142.                         /*ScrollToTodayCalendar();*/
  143.                         //fc-button fc-state-default
  144.                         $('#id-calendar button').removeClass('fc-button').removeClass('fc-state-default').addClass('btn btn-raised');
  145.                     }
  147.                 },
  148.                 timeFormat: 'H:mm',
  149.                 eventLimit: 4,
  150.                 firstDay: 1
  151.             });
  153.         }
  155.         function ShowLoader(show) {
  156.             if (show && !$('.calendar-loader').is(':visible')) {
  157.                 $('.calendar-loader').css('display', 'flex').hide().fadeIn();
  158.             } else {
  159.                 $('.calendar-loader').fadeOut();
  160.             }
  161.         }
  163.         function ScrollToTodayCalendar() {
  164.             var today_offset = $('.fc-today').offset();
  165.             if(today_offset !== undefined) {
  166.                 var scroller = $('.fc-scroller');
  167.                 if(scroller.css('overflow-y') == 'scroll') {
  168.                     $('.fc-scroller').stop().animate({scrollTop:today_offset.top - $('.fc-scroller').offset().top + 200}, 500, 'swing');
  169.                     $("html, body").stop().animate({scrollTop:$('.fc-scroller').offset().top - 200}, 500, 'swing');
  170.                 }
  171.                 else {
  172.                     $("html, body").stop().animate({scrollTop:today_offset.top - 200}, 500, 'swing');
  173.                 }
  174.             }
  175.         }
  176.     </script>
  177. {% endblock %}