How do I add events to the codrops calendario? I am new to jquery and php

[michalazra]

Here is my code

<title>Events</title> <script src="js/modernizr.custom.63321.js"></script>

• Home
• Gallery
• Events
• Music
• About
• Contact

Events

	<div id="diary">	
	<div class="custom-calendar-wrap custom-calendar-full">
		<div class="custom-header clearfix">
			<h3 class="custom-month-year">
				<span id="custom-month" class="custom-month"></span>
				<span id="custom-year" class="custom-year"></span>
					<nav>
						<span id="custom-prev" class="custom-prev"></span>
						<span id="custom-next" class="custom-next"></span>
					</nav> <!-- calendar nav div -->
			</h3>
		</div> <!-- custom-header clearfix div -->
		
			<div id="calendar" class="fc-calendar-container"></div>
	</div> <!-- custom-calendar-wrap custom-calendar-full div-->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.calendario.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript">	
		$(function() {
		
			var cal = $( '#calendar' ).calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						for( var key in dateProperties ) {
							console.log( key + ' = ' + dateProperties[ key ] );
						}

					},
					caldata : codropsEvents
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );
			$( '#custom-current' ).on( 'click', function() {
				cal.gotoNow( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}

			// you can also add more data later on. As an example:
			/*
			someElement.on( 'click', function() {
				
				cal.setData( {
					'03-01-2013' : '<a href="#">testing</a>',
					'03-10-2013' : '<a href="#">testing</a>',
					'03-12-2013' : '<a href="#">testing</a>'
				} );
				// goes to a specific month/year
				cal.goto( 3, 2013, updateMonthYear );

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

</div> <!-- diary div -->
	</div> <!-- empty div -->
				<div id="footer">
					<a href="https://www.facebook.com/Heyitschloechristine/"> <img src="images/facebook.png" alt="facebook" height="30" width="30">
				    <a href="https://www.youtube.com/channel/UCDZNCJjqDD6qWBm73AGd2Tw"><img src="images/youtube.png" alt="facebook" height="30" width="30">
					<a href="https://www.instagram.com/chloechristinemusic/"><img src="images/instagram.png" alt="facebook" height="32" width="32"><br><br>
					&copy; <img src="images/new_logo.png" alt="logo" height="30" width="30">
				</div> <!-- footer div -->