Bootstrap Calendar is displays month, day, and year view with highlighted days in bubble which some events occur. It provides minimal required functionality while maintaining maximum flexibility and extendibility. Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap and also you can easily customizable. So you have to implement bootstrap calendar in your application you need download the bootstrap calendar from this link is given below
Features
Template based - all view like year, month, week or days are based on templates. You can easily change how it looks or style it or even add new custom view.
LESS - easy adjust and style your calendar with less variables file.
AJAX - It uses AJAX to feed calendar with events. You provide URL and just return by this URL JSON list of events.
You will need to include the bootstrap css and calendar css. Here is the minimum setup
Index.cshtml markup given below
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/calendar.css">
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/content/bootstrap-calendar-master/calendar.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/bootstrap-calendar-master/components/underscore/underscore-min.js")"></script>
<script type="text/javascript">
$(function () {
var calendar = $("#calendar").calendar(
{
events_source: '/home/GetEvents',//get the events from server,
view: 'month',
tmpl_path: '@Url.Content("~/Content/bootstrap-calendar-master/tmpls/")',
tmpl_cache: false,
modal: null,//id model to show the popup
modal_type: "iframe", // modal handling setting, one of "iframe", "ajax" or "template"
day: '@DateTime.Now.ToString("yyyy-MM-dd")',
});
});
<div class="page-header">
<div class="pull-right form-inline">
<div class="btn-group">
<button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
<button class="btn" data-calendar-nav="today">Today</button>
<button class="btn btn-primary" data-calendar-nav="next">Next >></button>
</div>
<div class="btn-group">
<button class="btn btn-warning" data-calendar-view="year">Year</button>
<button class="btn btn-warning active" data-calendar-view="month">Month</button>
<button class="btn btn-warning" data-calendar-view="week">Week</button>
<button class="btn btn-warning" data-calendar-view="day">Day</button>
</div>
</div>
<h3></h3>
<small>To see example with events navigate to march @DateTime.now</small>
</div>
<div class="row">
<div class="span9">
<div id="calendar"></div>
</div>
</div>
<div class="clearfix"></div>
<br><br>
//Modal popup show on when click on calendar
<div class="modal hide fade" id="events-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Event</h3>
</div>
<div class="modal-body" style="height: 400px">
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
So you have completed the markup. Now we have need to bind the events as specify the event source calander script . so we need return json
It 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
{
"success": 1,
"result": [
{
"id": 293,
"title": "Event 1",
"url": "http://example.com",
"class": "event-important",
"start": 12039485678000, // Milliseconds
"end": 1234576967000 // Milliseconds
},
{
"id": 294,
"title": "Event 2",
"url": "http://example.com",
"class": "event-important",
"start": 12039485678000, // Milliseconds
"end": 1234576967000 // Milliseconds
}
]
}
Server Side
We have created the EventModel class to return json as given above example
public class EventModel
{
public int id { get; set; }
public string title { get; set; }
public string url { get; set; }
public string @class { get; set; }
public string start { get; set; }//Milliseconds
public string end { get; set; } // Milliseconds
}
I have use dummy list events in controller . you can query from database and return the similar example
public JsonResult GetEvents()
{
List<EventModel> evt = new List<EventModel>();
evt.Add(new EventModel { id = 1, title = "evt 1", url = "home/GetEventDetail/1", @class = "event-important", start = ConvertToMiliSeconds(DateTime.Now), end = ConvertToMiliSeconds(DateTime.Now.AddHours(5)) });
evt.Add(new EventModel { id = 2, title = "evt 2", url = "home/GetEventDetail/2", @class = "event-important", start = ConvertToMiliSeconds(DateTime.Now.AddDays(1)), end = ConvertToMiliSeconds(DateTime.Now.AddDays(1).AddHours(5)) });
evt.Add(new EventModel { id = 3, title = "evt 3", url = "home/GetEventDetail/3", @class = "event-important", start = ConvertToMiliSeconds(DateTime.Now.AddDays(2)), end = ConvertToMiliSeconds(DateTime.Now.AddDays(2).AddHours(5)) });
evt.Add(new EventModel { id = 4, title = "evt 4", url = "home/GetEventDetail/4", @class = "event-important", start = ConvertToMiliSeconds(DateTime.Now.AddDays(3)), end = ConvertToMiliSeconds(DateTime.Now.AddDays(3).AddHours(5)) });
return Json(new { success = 1, result = evt }, JsonRequestBehavior.AllowGet);
}
public string ConvertToMiliSeconds(DateTime current)
{
DateTime dt1970 = new DateTime(1970, 1, 1);
TimeSpan span = current - dt1970;
return span.TotalMilliseconds.ToString();
}
public PartialViewResult GetEventDetail(int id)
{
//query from database to show the full detail of event In bootstrap model
return PartialView();
}
No comments:
Post a Comment