Broken Scheduler

Illustrating the broken scheduler sample code.

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>
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<body style="padding: 10px;" class="fuelux">
<div class="row start-datetime">
    <label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
    <div class="col-sm-10">
        <div class="row no-margin">
            <div class="col-xs-4 col-sm-4 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">
                                        ...

CSS

body {
    padding: 20px;
}

JavaScript

$('.start-datetime').scheduler();