test-kalender.html

---
title: Kalender
permalink: "/kalender-test-page/"
layout: blog
---

{% include megamenu.html %}
<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/index.html" id="i18_title"><span data-i18n="website.title"><img src="\static\img\landing\logociptamedia.png" width="200" class="img-responsive" alt=""></span></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="i18_navbar">
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li class="dropdown mega-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Proyek Terdahulu <span class="caret"></span></a>
                        <ul class="dropdown-menu mega-dropdown-menu row">
                            <li class="col-sm-6">
                                <ul>
                                    <li class="dropdown-header">Cipta Media Seluler</li>
                                    <li><a href="/ciptamediaseluler/tentangcms.html">Tentang</a></li>
                                    <li><a href="#">Penerima Hibah</a></li>
                                    <li><a href="/ciptamediaseluler/hibahcms-semua.html">Pendaftar Hibah</a></li>
                                    <li><a href="#">Tim</a></li>
                                </ul>
                            </li>
                            <li class="col-sm-6">
                                <ul>
                                    <li class="dropdown-header">Cipta Media Bersama</li>
                                    <li><a href="/ciptamediabersama/tentangcmb.html">Tentang</a></li>
                                    <li><a href="#">Penerima Hibah</a></li>
                                    <li><a href="/ciptamediabersama/hibahcmb-semua.html">Pendaftar Hibah</a></li>
                                    <li><a href="#">Tim</a></li>
                                </ul>
                            </li>
                        </ul>
                    <li class="dropdown mega-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <span class="caret"></span></a>
                        <ul class="dropdown-menu mega-dropdown-menu row">
                            <li class="col-sm-6">
                                <ul>
                                    <li class="dropdown-header">Cipta Media Seluler</li>
                                    <li><a href="/berita/">Berita</a></li>
                                    <li><a href="/inspirasi/">Inspirasi</a></li>
                                    <li><a href="/kajian/">Kajian</a></li>
                                    <li><a href="/gagasan/">Gagasan</a></li>
                                    <li><a href="/inovasi/">Inovasi</a></li>
                                    <li><a href="/tutorial/">Tutorial</a></li>
                                </ul>
                            </li>
                            <li class="col-sm-6">
                                <ul>
                                    <li class="dropdown-header">Cipta Media Bersama</li>
                                    <li><a href="/acara/">Acara</a></li>
                                    <li><a href="/teladan/">Teladan</a></li>
                                </ul>
                            </li>
                        </ul>
                </ul>
            </div>
        </div>
    </nav>
</div>

<section class="features gray-section">
    <div class="container">
        <div class="row m-b-lg text-center">
            <div class="col-lg-12">
                <div class="navy-line"></div>
                <h1>Kalender</h1>
            </div>
        </div>

    <div id="calendar" class="calendar"></div>
    
	<script>
	$(function() {
		var currentYear = new Date().getFullYear();

		$('#calendar').calendar({ 
			enableContextMenu: true,
			clickDay: function(e) {
				if(e.events.length > 0) {
					var show = 1;
					var content = '';

					for(var i in e.events) {
						content += '<div class="event-tooltip-content">'
										+ '<a href="' + e.events[i].url + '"><div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
										+ '<div class="event-location">' + e.events[i].location + '</div></a>'
										+ '<hr>'
									+ '</div>';
					}

					$(e.element).popover({ 
						trigger: 'manual',
						container: 'body',
						html:true,
						content: content
					});

					$(e.element).popover('show');
				}
			},
			dayContextMenu: function(e) {
				$(e.element).popover('hide');
			},
			dataSource: [
			{% for post in site.categories['laporan'] %}
				{
					name: '{{ post.title }}',
					location: '{{ post.categories | last }}',
					url: '{{ post.url }}',
					startDate: new Date({{ post.date | date: "%Y" }}, {{ post.date | date: "%m" | minus: 1 }}, {{ post.date | date: "%d" }}),
					endDate: new Date({{ post.date | date: "%Y" }}, {{ post.date | date: "%m" | minus: 1 }}, {{ post.date | date: "%d" }}),
				},
			{% endfor %}
			]
		});

		$('[data-toggle="popover"],[data-original-title]').popover();

		$(document).on('click', function(e) {
			$('[data-toggle="popover"],[data-original-title]').each(function() {
			if (!$(this).is(e.element) && $(this).has(e.element).length === 0 && $('.popover').has(e.events).length === 0) {
			  $(this).popover('hide').data('bs.popover').inState.click = false
			}

			});
		});
	});
        </script>

	</div>
</section>