github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/fullcalendar/demos/selectable.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4  <meta charset='utf-8' />
     5  <link href='../fullcalendar.css' rel='stylesheet' />
     6  <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
     7  <script src='../lib/moment.min.js'></script>
     8  <script src='../lib/jquery.min.js'></script>
     9  <script src='../fullcalendar.min.js'></script>
    10  <script>
    11  
    12  	$(document).ready(function() {
    13  		
    14  		$('#calendar').fullCalendar({
    15  			header: {
    16  				left: 'prev,next today',
    17  				center: 'title',
    18  				right: 'month,agendaWeek,agendaDay'
    19  			},
    20  			defaultDate: '2014-09-12',
    21  			selectable: true,
    22  			selectHelper: true,
    23  			select: function(start, end) {
    24  				var title = prompt('Event Title:');
    25  				var eventData;
    26  				if (title) {
    27  					eventData = {
    28  						title: title,
    29  						start: start,
    30  						end: end
    31  					};
    32  					$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
    33  				}
    34  				$('#calendar').fullCalendar('unselect');
    35  			},
    36  			editable: true,
    37  			eventLimit: true, // allow "more" link when too many events
    38  			events: [
    39  				{
    40  					title: 'All Day Event',
    41  					start: '2014-09-01'
    42  				},
    43  				{
    44  					title: 'Long Event',
    45  					start: '2014-09-07',
    46  					end: '2014-09-10'
    47  				},
    48  				{
    49  					id: 999,
    50  					title: 'Repeating Event',
    51  					start: '2014-09-09T16:00:00'
    52  				},
    53  				{
    54  					id: 999,
    55  					title: 'Repeating Event',
    56  					start: '2014-09-16T16:00:00'
    57  				},
    58  				{
    59  					title: 'Conference',
    60  					start: '2014-09-11',
    61  					end: '2014-09-13'
    62  				},
    63  				{
    64  					title: 'Meeting',
    65  					start: '2014-09-12T10:30:00',
    66  					end: '2014-09-12T12:30:00'
    67  				},
    68  				{
    69  					title: 'Lunch',
    70  					start: '2014-09-12T12:00:00'
    71  				},
    72  				{
    73  					title: 'Meeting',
    74  					start: '2014-09-12T14:30:00'
    75  				},
    76  				{
    77  					title: 'Happy Hour',
    78  					start: '2014-09-12T17:30:00'
    79  				},
    80  				{
    81  					title: 'Dinner',
    82  					start: '2014-09-12T20:00:00'
    83  				},
    84  				{
    85  					title: 'Birthday Party',
    86  					start: '2014-09-13T07:00:00'
    87  				},
    88  				{
    89  					title: 'Click for Google',
    90  					url: 'http://google.com/',
    91  					start: '2014-09-28'
    92  				}
    93  			]
    94  		});
    95  		
    96  	});
    97  
    98  </script>
    99  <style>
   100  
   101  	body {
   102  		margin: 40px 10px;
   103  		padding: 0;
   104  		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
   105  		font-size: 14px;
   106  	}
   107  
   108  	#calendar {
   109  		max-width: 900px;
   110  		margin: 0 auto;
   111  	}
   112  
   113  </style>
   114  </head>
   115  <body>
   116  
   117  	<div id='calendar'></div>
   118  
   119  </body>
   120  </html>