Custom calendar representation types in AngularJS
Posted By : Milind Ahuja | 07-Jan-2017
This is custom made calendar view types which makes it easier to represent calendar, events or any data of any form based on Day, Week, Month and Year.
To make this you require AngularJS 1 which can be downloaded from: https://angularjs.org/ . You can also use Bootstrap to make use of it's predefined classes for CSS purposes.
Following is the HTML and JS which does the work for you:
HTML:
{{displayValue}}
JS:
var app = angular.module('myApp', []); app.controller('mainCtrl', function($scope, $filter) { //to get all the date parts var getDateParts = function(date) { month = (new Date(date)).getMonth(), day = (new Date(date)).getDate(), year = (new Date(date)).getFullYear(), fullDate = date, first = (new Date(date)).getDate() - (new Date(date)).getDay(), last = first + 6, dayFromDate = day, dayToDate = day, weekFromDate = new Date((new Date(date)).setDate(first)).getTime(), weekToDate = new Date((new Date(date)).setDate(last)).getTime(); monthFromDate = new Date((new Date(date)).getFullYear(), (new Date(date)).getMonth(), 1).getTime(); monthToDate = new Date((new Date(date)).getFullYear(), (new Date(date)).getMonth() + 1, 0).getTime(); yearFromDate = new Date((new Date(date)).getFullYear(), 0, 1).getTime(); yearToDate = new Date((new Date(date)).getFullYear(), 11, 31).getTime(); return { month: month, day: day, year: year, fullDate: fullDate, first: first, last: last, dayFromDate: dayFromDate, dayToDate: dayToDate, weekFromDate: weekFromDate, weekToDate: weekToDate, monthFromDate: monthFromDate, monthToDate: monthToDate, yearFromDate: yearFromDate, yearToDate: yearToDate } } $scope.dateObj = getDateParts(new Date()); //to set active class on current tab $scope.setActiveType = function(type, dateObj) { $scope.displayValue = $scope.getValue(type, dateObj); }; //to get the value based on the selected type(active tab) $scope.getValue = function(type, dateObj) { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; $scope.active = type; if (type == 'DAY') { return $filter('date')(dateObj.fullDate, 'fullDate'); } else if (type == 'MONTH') { return monthNames[dateObj.month] + ", " + dateObj.year; } else if (type == 'WEEK') { return $filter('date')(dateObj.weekFromDate, 'longDate') + " - " + $filter('date')(dateObj.weekToDate, 'longDate'); } else if (type == 'YEAR') { return dateObj.year; } } //function to view next and previous dates. $scope.changeValue = function(type, dateObj, flag) { var date = new Date(dateObj.year, dateObj.month, dateObj.day) switch (type) { case 'DAY': flag == "prev" ? angular.extend(dateObj, getDateParts(date.setDate(date.getDate() - 1))) : angular.extend(dateObj, getDateParts(date.setDate(date.getDate() + 1))); break; case 'MONTH': flag == "prev" ? angular.extend(dateObj, getDateParts(date.setMonth(date.getMonth() - 1))) : angular.extend(dateObj, getDateParts(date.setMonth(date.getMonth() + 1))); break; case 'WEEK': flag == "prev" ? angular.extend(dateObj, getDateParts(date.setDate(date.getDate() - 7))) : angular.extend(dateObj, getDateParts(date.setDate(date.getDate() + 7))); break; case 'YEAR': flag == "prev" ? angular.extend(dateObj, getDateParts(date.setFullYear(date.getFullYear() - 1))) : angular.extend(dateObj, getDateParts(date.setFullYear(date.getFullYear() + 1))); break; } $scope.displayValue = $scope.getValue(type, dateObj); } $scope.init = function() { $scope.setActiveType('MONTH', $scope.dateObj); } });
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.