FullCalendar.io example

page-calendar-2.liquid

<script>
 jq = jQuery.noConflict(false); 
 jq(function() {
   
 jq('#calendar').fullCalendar({
             // put your options and callbacks here
   header: {
     left: 'prev today next',
     right: 'title'
   },
   footer: {
     left: 'prev today next',
     right: 'title'
   },
   buttonText: {
    today:    'Today',
    month:    'Month',
    week:     'Week',
    day:      'Day',
    list:     'List'
	},
//   hiddenDays: [ 1, 2 ],
   firstDay: 1,
   //defaultDate: '2015-09-01',
   editable: false,
   fixedWeekCount: false,
   //eventLimit: true, // allow "more" link when too many events
   events: [
     {% paginate collections.shows.products by 100 %}
     {% for product in collections.shows.products %}
     	{% capture url %}{% if collection_handle != "" %}{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
     	{% if product.images.size >= 1%}
     		{% capture 'thumbnail' %}{{ product.featured_image | product_img_url: 'small' }}{% endcapture %}
     	{% else %}
     		{% capture 'thumbnail' %}{{ 'No_Image_2.png' | asset_url }}{% endcapture %}
     	{% endif %}
     	{% for variant in product.variants %}
     		{% capture 'datetime' %}{{ variant.title }}{{ variant.time }}{% endcapture %}
     		{% if forloop.first %}
     			{% capture 'displaytitle' %}{{ variant.title | split:'/' | first }}{% endcapture %}
     			{% assign dateparts = variant.title | split: ' ' %}
     		{% endif %}
     		{% if forloop.last %}
     			{% assign dateparts2 = variant.title | split: ' ' %}
     		{% endif %}
     		//alert('{{dateparts[5]}}');
     		{% if dateparts2[5] != dateparts[5] %}
     			{% capture 'displaydate' %}{{ dateparts[5] }} &amp; {{ dateparts2[5] }}{% endcapture %}
     		{% else %}
     			{% capture 'displaydate' %}{{ dateparts[5] }}{% endcapture %}
     		{% endif %}
     		{% if forloop.last %}
						          {
							  		date: '{{ displaytitle }}',
							  		thumbnail: '{{ thumbnail }}',
							  		prodtitle: "{{ product.title }}",
							  		displaydate: '{{ displaydate }}',
						            url: '{{ url }}',
							  		start: '{{ displaytitle | date: "%F" }}'
							  	  },
     		{% endif %}
     	{% endfor %}
     	{{ paginate | default_pagination }}
     {% endfor %}
     {% endpaginate %}
						],
						eventRender: function(event, element) {
							element.find(".fc-time").remove();
						    element.find(".fc-content").remove();
						    var acc_description = '<a href="' + event.url + '"><img width="100" alt="" src="' + event.thumbnail + '"></a><span class="fc-event-title">' + event.prodtitle + '</span></div><span class="fc-event-time">' + event.displaydate + '</span><div class="product-tocart"><a class="fancybox popup_fancybox" href="' + event.url + '">Buy Tickets</a>';

						    element.append(acc_description);
						}

        });      
 });  
</script>