A full-featured calendar UI built with Bootstrap and Backbone.
Blah, blah, blah...
You should download the latest from GitHub. In the archive you will find the following:
| /bootstrap-calendar/css | The core stylesheets, as well as for Font Awesome |
|---|---|
| /bootstrap-calendar/dist | All the files you will need to use bootstrap-calendar in production |
| /bootstrap-calendar/docs | A copy of these docs |
| /bootstrap-calendar/font | The font files for Font Awesome |
| /bootstrap-calendar/js | The JavaScript libraries |
| /bootstrap-calendar/build-docs.sh | A bash script for building and publishing this documentation |
| /bootstrap-calendar/build.sh | A bash script for assembling the contents of the /bootstrap-calendar/dist folder |
Alternatively, you could add bootstrap-calendar to your git project with something like this:
> git submodule add git@github.com:collegeman/bootstrap-calendar.git /htdocs/lib/bootstrap-calendar
In your project create a folder called bootstrap-calendar, then copy the folder /bootstrap-calendar/dist from the source archive into your project.
Inside the <head> tag and after the bootstrap stylesheets, add the following:
<link rel="stylesheet" href="/bootstrap-calendar/dist/css/font-awesome.min.css"> <link rel="stylesheet" href="/bootstrap-calendar/dist/css/bootstrap-calendar.min.css">
And before the closing </body> tag and after the bootstrap JavaScripts, add the following:
<!-- the backbone dependencies: --> <script src="/bootstrap-calendar/dist/js/underscore.min.js"></script> <script src="/bootstrap-calendar/dist/js/backbone.min.js"></script> <!-- bootstrap-calendar core library: --> <script src="/bootstrap-calendar/dist/js/bootstrap-calendar.min.js"></script>
Transform any nested block of markup into a calendar.
Transform an unordered list element <ul> and children <li>
into a calendar that responds to the size of its parent container.
<ul data-ui="calendar"> <li><b data-is="date">Today</b> The day you discovered bootstrap-calendar</li> <li><b data-is="date">Tomorrow</b> The day you finished your project</li> <li><b data-is="date">Next Friday</b> Celebrate victory</li> </ul>