使用AngularJS实现的一款很棒的日历控件

Angular.js Calendar 该日历控制还可以记录一个相关联的任务（待办事项）列表。

angular, calendar, app

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 7638
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    angular
        .module('calendarApp', ['ngAnimate'])
        .controller('calendarController', calendarController);

function calendarController($scope) {
        var vm = this,
            now = new Date(),
            months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            jan = daysInMonth(1, now.getFullYear()),
            feb = daysInMonth(2, now.getFullYear()),
            mar = daysInMonth(3, now.getFullYear()),
            apr = daysInMonth(4, now.getFullYear()),
            may = daysInMonth(5, now.getFullYear()),
            jun = daysInMonth(6, now.getFullYear()),
            jul = daysInMonth(7, now.getFullYear()),
            aug = daysInMonth(8, now.getFullYear()),
            sep = daysInMonth(9, now.getFullYear()),
            oct = daysInMonth(10, now.getFullYear()),
            nov = daysInMonth(11, now.getFullYear()),
            dec = daysInMonth(12, now.getFullYear()),
            monthRef = [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec],
            month = now.getMonth(),
            monthDay = monthRef[now.getMonth()],
            n = now.getDate(),
            uidi,
            uidm,
            uid;

vm.id = now.getDate().toString() + now.getMonth().toString();
        vm.dataId;
        vm.events = [];
        vm.description;
        vm.type = 'Social';
        vm.month = months[month];
        vm.next = next;
        vm.prev = prev;
        vm.add = add;

// Place Dates In Correct Place
        function placeIt() {
            if (month === 0) {
                $(".date_item").first().css({
                    'margin-left': '200px'
                })
            } else if (month === 1) {
                $("date_item").first().css({
                    'margin-left': '0px'
                })
            } else if (month === 2) {
                $(".date_item").first().css({
                    'margin-left': '50px'
                })
            } else if (month === 3) {
                $(".date_item").first().css({
                    'margin-left': '200px'
                })
            } else if (month === 4) {
                $(".date_item").first().css({
                    'margin-left': '300px'
                })
            } else if (month === 5) {
                $(".date_item").first().css({
                    'margin-left': '100px'
                })
            } else if (month === 6) {
                $(".date_item").first().css({
                    'margin-left': '200px'
                })
            } else if (month === 7) {
                $(".date_item").first().css({
                    'margin-left': '0px'
                })
            } else if (month === 8) {
                $(".date_item").first().css({
                    'margin-left': '150px'
                })
            } else if (month === 9) {
                $(".date_item").first().css({
                    'margin-left': '250px'
                })
            } else if (month === 10) {
                $(".date_item").first().css({
                    'margin-left': '50px'
                })
            } else if (month === 11) {
                $(".date_item").first().css({
                    'margin-left': '150px'
                })
            }
        }

// Highlight Present Day
        function presentDay() {
            $(".date_item").eq(n - 1).addClass("present");
        }

// Print List Of Dates For Current Month
        function showDays(days) {
            for (var i = 1; i < days; i++) {
                var uidi = i;
                var uidm = month;
                var uid = uidi.toString() + uidm.toString();
                $(".dates").append("<div class='date_item' data='" + uid + "'>" + i + "</div>");
            }
        }

// Get The Current Date
        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate() + 1;
        }

// Next Month
        function next() {
            if (month < 11) {
                month++;
                $(".dates").html('');
                vm.month = months[month];
                monthDay = monthRef[month];
                showDays(monthDay);
                placeIt();
            }
        }

// Previous Month
        function prev() {
            if (month === 0) {
                return false
            } else {
                month--;
                $(".dates").html('');
                vm.month = months[month];
                monthDay = monthRef[month];
                showDays(monthDay);
                placeIt();
            }
        }

// Add Events To Specified Date
        function add() {
            vm.events.push({
                id: vm.id,
                description: vm.description,
                type: vm.type
            });

vm.description = "";
            console.log(vm.events);
        }

// Fetch Unique ID For Each Date Item
        $(".dates").on("click", ".date_item", function() {
            vm.id = $(this).attr('data');
            vm.dataId = $(this).attr('data');
            $(this).addClass("present").siblings().removeClass("present");
            $scope.$apply();
        });

showDays(monthDay);

presentDay();

placeIt();

}

})();

编译

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
html,
body {
    background: #2A324B;
}
.calendar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
}
.calendar_left {
    background: #00A8E8;
    width: 400px;
    height: 415px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 1.5em;
    z-index: 1;
}
.calendar_left .header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-bottom: 2em;
    color: #FFF;
    font-size: 0.7em;
}
.calendar_left .header h1 {
    line-height: 1em;
}
.calendar_left .header i {
    cursor: pointer;
}
.calendar_right {
    background: #0096cf;
    width: 350px;
    height: 415px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    -webkit-transform: scale(0.95) translateX(-10px);
    transform: scale(0.95) translateX(-10px);
    z-index: 0;
}
.calendar_right .list {
    height: 351px;
    overflow-y: scroll;
    padding: 1em;
}
.calendar_right .list ul {
    padding: 2.25em;
}
.calendar_right .list li {
    padding: 1em;
    width: 180px;
    color: #FFF;
    -webkit-transform: translateX(-700px);
    transform: translateX(-700px);
}
.calendar_right .list .description {
    font-size: 12px;
}
.calendar_right form {
    position: absolute;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.calendar_right input {
    background: #008ec4;
    border: none;
    padding: 1.2em;
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    outline: none;
    color: #FFF;
    border-bottom-right-radius: 5px;
}
.calendar_right select {
    background: #007fb0;
    border: none;
    padding: 1.2em;
    outline: none;
    color: #FFF;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.days {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 400px;
}
.days .day_item {
    color: #FFF;
    width: 50px;
    text-align: center;
    padding-bottom: 1em;
}
.dates {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 350px;
}
.dates .date_item {
    color: #FFF;
    width: 50px;
    text-align: center;
    height: 50px;
    padding: 1em;
    cursor: pointer;
    border-radius: 100%;
}
.present {
    background: #FFF;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    border-radius: 50px;
    padding: 0.95em !important;
    color: #00A8E8 !important;
    z-index: 0;
    box-shadow: 10px 10px 5px #009dd9;
    -webkit-animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
::-webkit-scrollbar {
    display: none;
}
::-webkit-input-placeholder {
    color: #FFF;
}
.bounce-in.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
}
.bounce-in {
    -webkit-animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@-webkit-keyframes bounce-in {
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(7px);
        transform: translateX(7px);
    }
    100% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
}
@keyframes bounce-in {
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(7px);
        transform: translateX(7px);
    }
    100% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
}
@-webkit-keyframes bounce-button-in {
    0% {
        -webkit-transform: translateZ(0) scale(0);
        transform: translateZ(0) scale(0);
    }
    100% {
        -webkit-transform: translateZ(0) scale(0.7);
        transform: translateZ(0) scale(0.7);
    }
}
@keyframes bounce-button-in {
    0% {
        -webkit-transform: translateZ(0) scale(0);
        transform: translateZ(0) scale(0);
    }
    100% {
        -webkit-transform: translateZ(0) scale(0.7);
        transform: translateZ(0) scale(0.7);
    }
}

HTML

</html>
<div class='calendar' ng-controller='calendarController as calendar'>
    <div class='calendar_left'>
        <div class='header'>
            <i class='material-icons' ng-click='calendar.prev()'>navigate_before</i>
            <h1>{{calendar.month}}</h1>
            <i class='material-icons' ng-click='calendar.next()'>navigate_next</i>
        </div>
        <div class='days'>
            <div class='day_item'>Mon</div>
            <div class='day_item'>Tue</div>
            <div class='day_item'>Wed</div>
            <div class='day_item'>Thu</div>
            <div class='day_item'>Fri</div>
            <div class='day_item'>Sat</div>
            <div class='day_item'>Sun</div>
        </div>
        <div class='dates'></div>
    </div>
    <div class='calendar_right'>
        <div class='list'>
            <ul>
                <li class='bounce-in' ng-repeat='events in calendar.events' ng-show='events.id === calendar.dataId'>
                    <span class='type'>It's a {{ events.type }} thing -</span>
                    <span class='description'>{{ events.description }}</span>
                </li>
            </ul>
        </div>
        <form ng-submit='calendar.add()'>
            <input ng-model='calendar.description' placeholder='Enter a task for this day' type='text'>
            <select ng-model='calendar.type' placeholder='calendar.type'>
                <option value='Social'>Social</option>
                <option value='Work'>Work</option>
            </select>
            </input>
        </form>
    </div>
</div>

Angular.js Calendar 该日历控制还可以记录一个相关联的任务（待办事项）列表。

angular, calendar, app

编辑器支持Emmet

快捷键

Angular.js Calendar 该日历控制还可以记录一个相关联的任务（待办事项）列表。

angular, calendar, app

使用Angular.JS实现的可拖拉积木块

使用AngularJS实现的数学加减乘除可视化计算器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：