Bootstrap Snippet Calendar using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <div class="container">
      <div class="row"> 
<div class="col-md-4 col-lg-4 col-xs-12">
    <h2 style="text-align:center;">Current Schedule</h2>  
    <div class="alert alert-success">
        
      <button class="btn btn-success">Schedule Hours</button>
    </div>    
 
    <table class="table table-striped" style="font-size:0.9em;">
        <thead>
            <th>Date </th>
            <th>Hours Scheduled.</th>
            <th>Total Hours</th>
            <th></th>
        </thead>
    <tbody>
        
        <tr>
            <td>1/21/2017</td>
                 <td>9:00am - 12:00pm<br />
                    1:30am - 4:30pm <br />
                 </td>
                      <td>6 hours</td>
                      <td><button class="btn btn-sm btn-primary"><i class="fa fa-save"></i> Edit</button></td>
        </tr>
        
        <tr>
            <td>1/22/2017</td>
                 <td>9:00am - 12:00pm<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * Zabuto Calendar
 */
div.zabuto_calendar {
    margin: 0;
    padding: 0;
}
div.zabuto_calendar .table {
    width: 100%;
    margin: 0;
    padding: 0;
}
div.zabuto_calendar .table th,
div.zabuto_calendar .table td {
    padding: 4px 2px;
    text-align: center;
}
div.zabuto_calendar .table tr th,
div.zabuto_calendar .table tr td {
    background-color: #ffffff;
}
div.zabuto_calendar .table tr.calendar-month-header th {
    background-color: #fafafa;
}
div.zabuto_calendar .table tr.calendar-month-header th span {
    cursor: pointer;
    display: inline-block;
    padding-bottom: 10px;
}
div.zabuto_calendar .table tr.calendar-dow-header th {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * Zabuto Calendar
 *
 * Dependencies
 * - jQuery (2.0.3)
 * - Twitter Bootstrap (3.0.2)
 */
if (typeof jQuery == 'undefined') {
    throw new Error('jQuery is not loaded');
}
/**
 * Create calendar
 *
 * @param options
 * @returns {*}
 */
$.fn.zabuto_calendar = function (options) {
    var opts = $.extend({}, $.fn.zabuto_calendar_defaults(), options);
    var languageSettings = $.fn.zabuto_calendar_language(opts.language);
    opts = $.extend({}, opts, languageSettings);
    this.each(function () {
        var $calendarElement = $(this);
        $calendarElement.attr('id', "zabuto_calendar_" + Math.floor(Math.random() * 99999).toString(36));
        $calendarElement.data('initYear', opts.year);
        $calendarElement.data('initMonth', opts.month);
        $calendarElement.data('monthLabels', opts.month_labels);
        $calendarElement.data('weekStartsOn', opts.weekstartson);
        $calendarElement.data('navIcons', opts.nav_icon);
        $calendarElement.data('dowLabels', opts.dow_labels);
        $calendarElement.data('showToday', opts.today);
        $calendarElement.data('showDays', opts.show_days);
        $calendarElement.data('showPrevious', opts.show_previous);
        $calendarElement.data('showNext', opts.show_next);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Calendar"
Bootstrap 3.3.0 Snippet by careercoder

Related: See More

Questions / Comments:

"Calendar" Bootstrap 3.3.0 Snippet by careercoder

Related: See More

Questions / Comments:

"Calendar"
Bootstrap 3.3.0 Snippet by careercoder