weekli.js

Let's Get Started

                    
<!-- in our HTML we'll make a new div where weekli will live -->
<div id="weekli"></div>
                    
                    
// now in our JS we'll create a new weekli object and build it with the default options
var weekli = new Weekli():
weekli.build();

Get The Output

                    
var weekli_output = weekli.get_output();

// example output
{
    "available": [
        {
            "day": "WED",
            "time": "7:00 am-8:00 am"
        },
        // etc. etc.
      ],
    "unavailable": [
        {
            "day": "WED",
            "time": "8:00 am-9:00 am"
        },
        // etc. etc.
      ]
}

Make It A Custom Fit

                    
// Here are all of weekli's customization
// properties and their default value

var weekli = new Weekli({
    wk_id: 'weekli',
    // specifies the div id weekli is in
    // (example if <div id = "weekli_custom"></div> then wk_id: 'weekli_custom')

    week: 'workweek',
    // decides which days of the week to show
    // (can be 'week', 'workweek', 'weekend', or 'custom')

    week_days: [],
    // if 'week: custom', days of the week will be pulled from this array of strings
    // (ex: week_days: ['Sunday', 'Tuesday', 'Friday'])

    minute_interval: '60',
    // determines the time-span for each row
    // (ex: minute_interval: 75 would lead to rows showing 1hr 15min intervals 7:00 - 8:15)

    time_range: '7:00,12:00',
    // specifies the start and end times for the rows in military format
    // (ex: time_range: 10:15,15:30 would have rows going from 10:15 am - 3:30 pm)

    editable: true,
    // determines if weekli component can be changed by user interaction

    time_format: '12hour'
    // specifies if time should be shown in civilian or military format
    // can be '12hour' or '24hour'
});

weekli.build();

Make It Work For You

                        
weekli.make_uneditable();
// weekli will now ignore all user input

weekli.make_editable();
// weekli will react to user input

weekli.load_data(JSON);
// clear the calendar, then load in the JSON object
// and display the available times

weekli.all_available();
// make all times available

weekli.all_unavailable();
// make all times unavailable

Get Your Hands On It

github link

BOWER

copy

                    
bower install weekli.js --save

NPM

copy

                    
npm install weekli.js --save

GIT

copy

                    
git clone https:/github.com/collnwalkr/weekli.git

Include The Files

copy

                    
<!-- be sure to include the css and js files in your HTML -->
<link type="text/css" rel="stylesheet" href=".../weekli.css">
<script type="text/javascript" src=".../weekli.min.js"></script>