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);
    }
});
  
This simple AngularJS calendar representation type can be used easily to show data in form of bar charts, line charts, pie charts etc. based on Day, week, month and year. THANKS

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..