qndlK

index.html

	<div id='calendar'></div>

qndlk.markdown

qndlK

A Pen by chris on CodePen.

License.

script.js

		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			defaultDate: '2014-09-12',
			editable: false,
			eventLimit: true, // allow "more" link when too many events
			events: [
				{
					title: 'Long Event',
					start: '2014-09-07',
					end: '2014-09-10',
          	url: 'https://google.com/'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-09-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-09-16T16:00:00'
				},
				{
					title: 'Conference',
					start: '2014-09-11',
					end: '2014-09-13'
				},
				{
					title: 'Meeting',
					start: '2014-09-12T10:30:00',
					end: '2014-09-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2014-09-12T12:00:00'
				},
				{
					title: 'Meeting',
					start: '2014-09-12T14:30:00'
				},
				{
					title: 'Happy Hour',
					start: '2014-09-12T17:30:00'
				},
				{
					title: 'Dinner',
					start: '2014-09-12T20:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2014-09-13T07:00:00'
				}
			],

        eventClick: function(event) {
          if (event.url) {
            $.magnificPopup.open({
                items: {                    
                  iframe: event.url,
                  type: 'iframe'
                }
         
            });
          }
        }
      
		});
		

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js"></script>
<script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=0.9.9"></script>

style.css

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

  .fc-event{
     background:red;
     border-color:red;
  }

styles

<link href="https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.css" rel="stylesheet" />
<link href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=0.9.9" rel="stylesheet" />