<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}

    <link rel="stylesheet" href="{{ asset_url("theme::css/fullcalendar.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/fullcalendar.print.css") }}" media='print'>

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 640px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
    
    <style>
    #calendar {
    max-width: 900px;
    margin: 0 auto;
  }</style>
</head>
<body>

{% include "theme::partials/navigation" %}

<section class="grid-container full columns">
	<section class="cell studio-event fujiInspiring no-padding columns">
        <section class="grid-x">
           <div class="specialBanner bannerStore nopaci heightMid columns small-12 cell">
              <img src="{{ image('theme::img/remove/booking-studio-banner-new.jpg').fit(1366, 341).url() }}" alt=""/><!-- 1366 × 352 -->
              
              <div class="caption">
                 <div class="sizeCenterElm">
                    <div class="boxSize">
                       <span class="titlefeature">{{ trans('theme::calendar.banner-desc') }}</span>
                       <h1 class="titleCaption">
                          Fujifilm Studio
                       </h1>
                    </div>
                 </div>
              </div>
           </div><!-- END specialBanner // satu Banner Besar -->
        </section>
    </section>
    <section class="grid-x">

        <section class="storeLocator cell">
            <div class="grid-x">
                <div class="small-3 cell storeLeftBlock">
                  <div class="alamatStore"></div>
        					<div class="searchLocator">
        						
        					</div>
                </div>
                <div class="small-9 cell bookStudio">
                    <div id="calendar"></div>
                </div>

            </div>
        </section><!-- END homeNewsEvent -->

    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/moment.js") }}"></script>
<script src="{{ asset_url("theme::js/fullcalendar.js") }}"></script>

<script type="text/javascript">
    global();
    $(document).ready(function(){
        $('#calendar').fullCalendar({
	      header: {
	        left: 'prev,next today',
	        center: 'title',
	        right: 'agendaWeek'
	      },
	      defaultView: 'agendaWeek',
	      defaultDate: new Date(),
	      defaultAllDayEventDuration: "02:00:00",
	      minTime: "10:00:00",
	      maxTime: "23:00:00",
	      slotDuration: "02:00:00",
	      slotLabelFormat:'h(:mm)a',
	      navLinks: false, // can click day/week names to navigate views
	      columnHeaderFormat: [
	      'dddd',
	      'MMM D YYYY'
	      ],
	      editable: false,
	      eventLimit: true, // allow "more" link when too many events
	      events: [
	        {
	          title: 'Click for Google',
	          url: 'http://google.com/',
	          start: '2018-11-07T10:00:00'
	        },
	        {
		      start: '2018-11-07T10:00:00',
		      end: '2018-11-07T23:00:00',
		      rendering: 'background'
		    }
	      ]
	    });

	  });
</script>


</body>
</html>
