Scheduler examples

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<body style="padding: 10px;" class="fuelux">

    			<section id="scheduler">
				<h2>Scheduler</h2>
				<div class="thin-box">
					<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
						<div class="form-group start-datetime">
							<label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
							<div class="row col-sm-10">
								<div class="col-sm-8 form-group">
									<div class="datepicker start-date">
										<div class="input-group">
											<input class="form-control" id="myStartDate" type="text" />
											<div class="input-group-btn">
												<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
													<span class="glyphicon glyphicon-calendar"></span>
													<span class="sr-only">Toggle Calendar</span>
												</button>
												<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
													<div class="datepicker-calendar">
														<div class="datepicker-calendar-header">
															<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span>
															</button>
															<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span>
															</button>
															<button type="button" class="title">
																<span class="month">
															<span...

CSS

body {
    padding: 20px;
}

JavaScript

// overwriting default end date AI logic
	 $('#myScheduler').scheduler({
	 	startDateChanged: function() {
	 		// your pre-guess logic here
	 		
            // call the component's guess logic
            this._guessEndDate();
	 		
            // your post-guess logic here
	 	}
	 });

// sample method buttons
	$('#btnSchedulerEnable').on('click', function () {
		$('#myScheduler').scheduler('enable');
	});
	$('#btnSchedulerDisable').on('click', function () {
		$('#myScheduler').scheduler('disable');
	});
	$('#btnSchedulerLogValue').on('click', function () {
		var val = $('#myScheduler').scheduler('value');
		log(val);
	});
	$('#btnSchedulerLogStringValue').on('click', function () {
		var val = $('#myScheduler').scheduler('getValue');
		log(val);
	});
	$('#btnSchedulerSetValue').on('click', function () {
		var newVal = {
			'startDateTime': '2014-03-31T03:23+02:00',
			'timeZone': {
				'name': 'Namibia Standard Time',
				'offset': '+02:00'
			},
			'recurrencePattern': 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919'
		};
		log(newVal);
		$('#myScheduler').scheduler('value', newVal);
	});
	$('#btnSchedulerDestroy').on('click', function () {
		var $container = $('#myScheduler').parent();
		var markup = $('#myScheduler').scheduler('destroy');
		log(markup);
		$container.append(markup);
		$('#myScheduler').scheduler();
	});

	// events
	$('#myScheduler').on('changed.fu.scheduler', function () {
		log('scheduler changed.fu.scheduler: ', arguments);
	});