Skip to main content Skip to footer

Creating a Spread.Views Calendar

A calendar that shows when employees are out can be useful to everyone at a company. Spread.Views has a calendar view that you can add custom information to. You can see several examples in the Spread.Views demo on our web site: http://spread.grapecity.com/Demos/JS/ViewsDemo/#/demos/ The example in this blog creates a single month view and adds custom text to the calendar days for employees that are out of the office. To create this example, add the following links to your page. The gridlayout reference is used for a basic grid. The calendargrouping reference is required for a calendar view.

<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">  
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.calendargrouping.10.0.0.css">  
<script src="./plugins/gc.spread.views.calendargrouping.10.0.0.min.js" type="text/javascript"></script>  

Use this code to add a title with basic formatting to the calendar.


JULY 2016  

Add this code to set a basic grid style.




Add this code to set a style for the first grid cell in the calendar.

 .gc-cell.c0 { font-size: 13px; color: white; border: 1px solid; border-radius: 5px; background: #157fcc; text-align: center; } .gc-cell-border { border: none } 

Add your data. The data in this example creates a list of names and reasons for being out of the office.

var data = [{ "EmployeeName": "Bob", "Reason": "Vacation", "DayOff": "2016/07/29" }, { "EmployeeName": "Steven", "Reason": "Family Leave", "DayOff": "2016/07/20" }, { "EmployeeName": "All", "Reason": "U.S. Holiday", "DayOff": "2016/07/04" }, { "EmployeeName": "Janet", "Reason": "Vacation", "DayOff": "2016/07/20" }, { "EmployeeName": "Alice", "Reason": "Sick", "DayOff": "2016/07/08" }, { "EmployeeName": "Greg", "Reason": "Sick", "DayOff": "2016/07/18" }, { "EmployeeName": "Sue", "Reason": "Vacation", "DayOff": "2016/07/15" }]; 

Create the column layout for the calendar. This specifies what information you want to see and how you want the column formatted.

var columns = [{ id: 'EmployeeName', width:60, dataField: 'EmployeeName' }, { id: 'Reason', width: '*', dataField: 'Reason' }, { id: 'DayOff', dataField: 'DayOff', dataType: 'date', visible: false }]; 

You can set the starting date for the calendar or use the default current date. This code sets the calendar view to the current date (month view).

groupStrategy: new GC.Spread.Views.Plugins.CalendarGrouping() 

This code creates a calendar strategy that sets the starting date for the month view of the calendar to July. The month value is zero-based.

calendarStrategy = new GC.Spread.Views.Plugins.CalendarGrouping({ viewMode: 'Month', startDate: new Date(2016, 6, 1, 8, 0, 0) }); 

Create the data view. The grouping option groups your data by date so the name and reason are displayed in a specific calendar day. The groupStategy option is set to CalendarStrategy for the calendar view.

 new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({ grouping: { field: 'DayOff' }, groupStrategy: calendarStrategy })); 

That is all the code you need to create a month view of the calendar with custom text. SpreadViewsCalendar Here is the complete code sample:

<!doctype html>  
<html style="height:100%;font-size:14px;">  
<head>  
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">  
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.calendargrouping.10.0.0.css">  
<script src="./plugins/gc.spread.views.calendargrouping.10.0.0.min.js" type="text/javascript"></script>  

<style>  
.gc-cell.c0 {  
font-size: 13px;  
color: white;  
border: 1px solid;  
border-radius: 5px;  
background: #157fcc;  
text-align: center;  
}  
.gc-cell-border {  
border: none  
}  
</style>  
</head>  
<div id="title" style="font:400 18px arial,sans-serif;text-align: center;">JULY 2016</div>  
<div id="grid1" style="height: 500px;width: 1100px;"></div>  
<script type="text/javascript">  
var data = [{ "EmployeeName": "Bob", "Reason": "Vacation", "DayOff": "2016/07/29" }, { "EmployeeName": "Steven", "Reason": "Family Leave", "DayOff": "2016/07/20" }, { "EmployeeName": "All", "Reason": "U.S. Holiday", "DayOff": "2016/07/04" }, { "EmployeeName": "Janet", "Reason": "Vacation", "DayOff": "2016/07/20" }, { "EmployeeName": "Alice", "Reason": "Sick", "DayOff": "2016/07/08" }, { "EmployeeName": "Greg", "Reason": "Sick", "DayOff": "2016/07/18" }, { "EmployeeName": "Sue", "Reason": "Vacation", "DayOff": "2016/07/15" }];  
var columns = [{  
id: 'EmployeeName',  
width:60,  
dataField: 'EmployeeName'  
}, {  
id: 'Reason',  
width: '*',  
dataField: 'Reason'  
}, {  
id: 'DayOff',  
dataField: 'DayOff',  
dataType: 'date',  
visible: false  
}];  
calendarStrategy = new GC.Spread.Views.Plugins.CalendarGrouping({  
viewMode: 'Month',  
startDate: new Date(2016, 6, 1, 8, 0, 0)  
});  
new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({  
grouping: {  
field: 'DayOff'  
},  
groupStrategy: calendarStrategy  
}));  
</script>  
</body>  
</html> 

MESCIUS inc.

comments powered by Disqus