{"id":32257978,"url":"https://github.com/eterey/bootstrap-calendar","last_synced_at":"2026-03-08T21:03:55.246Z","repository":{"id":58219128,"uuid":"52872731","full_name":"eterey/bootstrap-calendar","owner":"eterey","description":"Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.","archived":false,"fork":true,"pushed_at":"2016-03-31T03:14:02.000Z","size":1337,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-26T19:53:07.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bootstrap-calendar.azurewebsites.net/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Serhioromano/bootstrap-calendar","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eterey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-01T11:44:02.000Z","updated_at":"2016-10-05T07:03:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/eterey/bootstrap-calendar","commit_stats":null,"previous_names":["uzumaxy/bootstrap-calendar"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/eterey/bootstrap-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eterey%2Fbootstrap-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eterey%2Fbootstrap-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eterey%2Fbootstrap-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eterey%2Fbootstrap-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eterey","download_url":"https://codeload.github.com/eterey/bootstrap-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eterey%2Fbootstrap-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30273304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T20:45:49.896Z","status":"ssl_error","status_checked_at":"2026-03-08T20:45:49.525Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-22T19:40:57.552Z","updated_at":"2026-03-08T21:03:55.241Z","avatar_url":"https://github.com/eterey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Bootstrap Calendar\n===\n\nA Full view calendar based on Twitter Bootstrap. Please try the [demo](http://bootstrap-calendar.azurewebsites.net).\n\n![Bootstrap full calendar](http://serhioromano.s3.amazonaws.com/github/bs-calendar.png)\n\n### Why?\n\nWhy did I start this project? Well, I believe there are no good full view calendar's out there with native Bootstrap support. In fact I could not find even one. A different UI and UX concept approach is also used.\n\n\n### Features\n\n- **Reusable** - there is no UI in this calendar. All buttons to switch view or load events are done separately. You will end up with your own uniquie calendar design.\n- **Template based** - all view like **year**, **month**, **week** or **day** are based on templates. You can easily change how it looks or style it or even add new custom view.\n- **LESS** - easy adjust and style your calendar with less variables file.\n- **AJAX** - It uses AJAX to feed calendar with events. You provide URL and just return by this URL `JSON` list of events.\n- **i18n** - language files are connected separately. You can easily translate the calendar into your own language. Holidays are also diplayed on the calendar according to your language\n\n## How to use\n\n### Install\n\nYou can install it with [bower](http://bower.io/) package manager.\n\n\t$ bower install bootstrap-calendar\n\nBower will automatically install all dependencies. Then by running\n\n\t$ bower list --path\n\nYou will see list of the files you need to include to your document.\n\n### Quick setup\nYou will need to include the bootstrap css and calendar css. Here is the minimum setup.\n\n\t\u003c!DOCTYPE html\u003e\n\t\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003ctitle\u003eMinimum Setup\u003c/title\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"css/bootstrap.min.css\"\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"css/calendar.css\"\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\n\t\t\u003cdiv id=\"calendar\"\u003e\u003c/div\u003e\n\n\t\t\u003cscript type=\"text/javascript\" src=\"js/vendor/jquery-1.9.1.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\" src=\"js/vendor/underscore-min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\" src=\"js/calendar.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\"\u003e\n\t\t\tvar calendar = $(\"#calendar\").calendar(\n\t\t\t\t{\n\t\t\t\t\ttmpl_path: \"/tmpls/\",\n\t\t\t\t\tevents_source: function () { return []; }\n\t\t\t\t});\t\t\t\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\t\u003c/html\u003e\n\nBootstrap Calendar depends on [jQuery](http://jquery.com/) and [underscore.js](http://underscorejs.org/) is used as a template engine.\nFor the calendar you only have to include the `calendar.css` and `calendar.js` files.\nIf you want to localize your Calendar, it's enough to add this line before including calendar.js:\n\n\t\u003cscript type=\"text/javascript\" src=\"js/language/xx-XX.js\"\u003e\u003c/script\u003e\n\nWhere xx-XX is the language code. When you initializing the calendar, you have to specify this language code:\n\n\t\u003cscript type=\"text/javascript\"\u003e\n\t\tvar calendar = $('#calendar').calendar({language: 'xx-XX'});\n\t\u003c/script\u003e\n\n\n\n\n## Feed with events\n\nTo feed the calendar with events you should use `events_source` parameter. It may be a function, array or URL. In all cases you have to set it with valid events array.\n\nSee [events.json.php](https://github.com/Serhioromano/bootstrap-calendar/blob/master/events.json.php) file for more details.\n\n`start` and `end` contain dates when event starts (inclusive) and ends (exclusive) in Unix timestamp. Classes are `event-important`, `event-success`, `event-warning`, `event-info`, `event-inverse` and `event-special`. This wil change the color of your event indicators.\n\n### Feed URL\n\n\tvar calendar = $('#calendar').calendar({events_source: '/api/events.php'});\n\nIt will send two parameters by `GET` named `from` and `to`, which will tell you what period is required. You have to return it in JSON structure like this\n\n\t{\n\t\t\"success\": 1,\n\t\t\"result\": [\n\t\t\t{\n\t\t\t\t\"id\": 293,\n\t\t\t\t\"title\": \"Event 1\",\n\t\t\t\t\"url\": \"http://example.com\",\n\t\t\t\t\"class\": \"event-important\",\n\t\t\t\t\"start\": 12039485678000, // Milliseconds\n\t\t\t\t\"end\": 1234576967000 // Milliseconds\n\t\t\t},\n\t\t\t...\n\t\t]\n\t}\n\n### Feed array\n\nYou can set events list array directly to `events_source` parameter.\n\n\tvar calendar = $('#calendar').calendar({\n\t    events_source: [\n            {\n                \"id\": 293,\n                \"title\": \"Event 1\",\n                \"url\": \"http://example.com\",\n                \"class\": \"event-important\",\n                \"start\": 12039485678000, // Milliseconds\n                \"end\": 1234576967000 // Milliseconds\n            },\n            ...\n        ]});\n\n\n### Feed function\n\nOr you can use function. You have to return array of events.\n\n\tvar calendar = $('#calendar').calendar({events_source: function(){\n\t    return  [\n           {\n               \"id\": 293,\n               \"title\": \"Event 1\",\n               \"url\": \"http://example.com\",\n               \"class\": \"event-important\",\n               \"start\": 12039485678000, // Milliseconds\n               \"end\": 1234576967000 // Milliseconds\n           },\n           ...\n       ];\n\t}});\n\n\n### PHP example\n\nNote that `start` and `end` dates are in milliseconds, thus you need to divide it by 1000 to get seconds. PHP example.\n\n    $start = date('Y-m-d h:i:s', ($_GET['start'] / 1000));\n\nIf you have an error you can return\n\n\t{\n\t\t\"success\": 0,\n\t\t\"error\": \"error message here\"\n\t}\n\nHere is the example of PHP script.\n\n```php\n\u003c?php\n$db    = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8', 'username', 'password');\n$start = $_REQUEST['from'] / 1000;\n$end   = $_REQUEST['to'] / 1000;\n$sql   = sprintf('SELECT * FROM events WHERE `datetime` BETWEEN %s and %s',\n    $db-\u003equote(date('Y-m-d', $start)), $db-\u003equote(date('Y-m-d', $end)));\n\n$out = array();\nforeach($db-\u003equery($sql) as $row) {\n    $out[] = array(\n        'id' =\u003e $row-\u003eid,\n        'title' =\u003e $row-\u003ename,\n        'url' =\u003e Helper::url($row-\u003eid),\n        'start' =\u003e strtotime($row-\u003edatetime) . '000',\n        'end' =\u003e strtotime($row-\u003edatetime_end) .'000'\n    );\n}\n\necho json_encode(array('success' =\u003e 1, 'result' =\u003e $out));\nexit;\n```\n\nAnother example of PHP script (without connecting with the Database).\n\n```php\n\u003c?php\n$out = array();\n \n for($i=1; $i\u003c=15; $i++){ \t//from day 01 to day 15\n\t$data = date('Y-m-d', strtotime(\"+\".$i.\" days\"));\n\t$out[] = array(\n     \t'id' =\u003e $i,\n\t\t'title' =\u003e 'Event name '.$i,\n\t\t'url' =\u003e Helper::url($id),\n\t\t'class' =\u003e 'event-important',\n\t\t'start' =\u003e strtotime($data).'000'\n\t);\n}\n \necho json_encode(array('success' =\u003e 1, 'result' =\u003e $out));\nexit;\n?\u003e\n```\n\n## Usage warning.\n\nYou cannot use the calendar from a local file. \nThe following error will be displayed :\nFailed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. \n\nUsing Ajax with local resources (file:///), is not permited. You will need to deploy this to the web instead.\n\n## Modal popup\n\nYou can enable a bootstrap modal popup to show when clicking an event instead of redirecting to event.url. \nTo enable boostrap modal, first add the modal html to your page and provide boostrap-calendar with the ID:\n\n    \u003cdiv class=\"modal hide fade\" id=\"events-modal\"\u003e\n        \u003cdiv class=\"modal-header\"\u003e\n            \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n            \u003ch3\u003eEvent\u003c/h3\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"modal-body\" style=\"height: 400px\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"modal-footer\"\u003e\n            \u003ca href=\"#\" data-dismiss=\"modal\" class=\"btn\"\u003eClose\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\nand then set:\n\n\tmodal: \"#events-modal\"\n\nThis will enable the modal, and populate it with an iframe with the contents of event.url .\n\nFor Bootstrap v3, use\n\n    \u003cdiv class=\"modal fade\" id=\"events-modal\"\u003e\n        \u003cdiv class=\"modal-dialog\"\u003e\n            \u003cdiv class=\"modal-content\"\u003e\n                \u003cdiv class=\"modal-header\"\u003e\n                    \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n                    \u003ch3\u003eEvent\u003c/h3\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-body\" style=\"height: 400px\"\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-footer\"\u003e\n                    \u003ca href=\"#\" data-dismiss=\"modal\" class=\"btn\"\u003eClose\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n### Modal content source\n\nThere are three options for populating the contents of the modal, controlled by the `modal_type` option:\n- **iframe** (default) - populates modal with iframe, iframe.src set to event.url\n- **ajax** - gets html from event.url, this is useful when you just have a snippet of html and want to take advantage of styles in the calendar page\n- **template** - will render a template (example in tmpls/modal.html) that gets the `event` and a reference to the `calendar` object.\n\n### Modal title\n\nThe modal title can be customized by defining the `modal_title` option as a function. This function will receive the event as its only parameter. For example, this could be used to set the title of the modal to the title of the event:\n\n\tmodal_title: function(event) { return event.title }\n\nA calendar set up to use modals would look like this:\n\n\t$(\"#calendar\").calendar({modal : \"#events-modal\", modal_type : \"ajax\", modal_title : function (e) { return e.title }})\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feterey%2Fbootstrap-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feterey%2Fbootstrap-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feterey%2Fbootstrap-calendar/lists"}