如何使用带MVC4的angularjs创建日历 [英] How to create calendar using angularjs with MVC4

查看：52
本文介绍了如何使用带MVC4的angularjs创建日历的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的观看页面在下面







My view page is below



<title>
    
    
    
    


    <div class="header">
        
        <span>{{month.format("MMMM, YYYY")}}</span>
        
    </div>
    <div class="week names">
        <span class="day">Sun</span>
        <span class="day">Mon</span>
        <span class="day">Tue</span>
        <span class="day">Wed</span>
        <span class="day">Thu</span>
        <span class="day">Fri</span>
        <span class="day">Sat</span>
    </div>
    <div class="week">
        <span class="day">{{day.number}}</span>
    </div>











My Js file








My Js file

var app = angular.module("demo", []);

app.controller("calendarDemo", function($scope) {
    $scope.day = moment();
});

app.directive("calendar", function() {
    return {
        restrict: "E",
        templateUrl: "templates/calendar.html",
        scope: {
            selected: "="
        },
        link: function(scope) {
            scope.selected = _removeTime(scope.selected || moment());
            scope.month = scope.selected.clone();

            var start = scope.selected.clone();
            start.date(1);
            _removeTime(start.day(0));

            _buildMonth(scope, start, scope.month);

            scope.select = function(day) {
                scope.selected = day.date;  
            };

            scope.next = function() {
                var next = scope.month.clone();
                _removeTime(next.month(next.month()+1)).date(1));
                scope.month.month(scope.month.month()+1);
                _buildMonth(scope, next, scope.month);
            };

            scope.previous = function() {
                var previous = scope.month.clone();
                _removeTime(previous.month(previous.month()-1).date(1));
                scope.month.month(scope.month.month()-1);
                _buildMonth(scope, previous, scope.month);
            };
        }
    };
    
    function _removeTime(date) {
        return date.day(0).hour(0).minute(0).second(0).millisecond(0);
    }

    function _buildMonth(scope, start, month) {
        scope.weeks = [];
        var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
        while (!done) {
            scope.weeks.push({ days: _buildWeek(date.clone(), month) });
            date.add(1, "w");
            done = count++ > 2 && monthIndex !== date.month();
            monthIndex = date.month();
        }
    }

    function _buildWeek(date, month) {
        var days = [];
        for (var i = 0; i < 7; i++) {
            days.push({
                name: date.format("dd").substring(0, 1),
                number: date.date(),
                isCurrentMonth: date.month() === month.month(),
                isToday: date.isSame(new Date(), "day"),
                date: date
            });
            date = date.clone();
            date.add(1, "d");
        }
        return days;
    }
});





结果未到来



我尝试了什么：



我试过了



我的查看页面位于下方



The result is not coming

What I have tried:

I have tried

My View page is below

<title>   
    <div class="header">
        
        <span>{{month.format("MMMM, YYYY")}}</span>
        
    </div>
    <div class="week names">
        <span class="day">Sun</span>
        <span class="day">Mon</span>
        <span class="day">Tue</span>
        <span class="day">Wed</span>
        <span class="day">Thu</span>
        <span class="day">Fri</span>
        <span class="day">Sat</span>
    </div>
    <div class="week">
        <span class="day">{{day.number}}</span>
    </div>





我的Js文件





My Js file

var app = angular.module("demo", []);

app.controller("calendarDemo", function($scope) {
    $scope.day = moment();
});

app.directive("calendar", function() {
    return {
        restrict: "E",
        templateUrl: "templates/calendar.html",
        scope: {
            selected: "="
        },
        link: function(scope) {
            scope.selected = _removeTime(scope.selected || moment());
            scope.month = scope.selected.clone();

            var start = scope.selected.clone();
            start.date(1);
            _removeTime(start.day(0));

            _buildMonth(scope, start, scope.month);

            scope.select = function(day) {
                scope.selected = day.date;  
            };

            scope.next = function() {
                var next = scope.month.clone();
                _removeTime(next.month(next.month()+1)).date(1));
                scope.month.month(scope.month.month()+1);
                _buildMonth(scope, next, scope.month);
            };

            scope.previous = function() {
                var previous = scope.month.clone();
                _removeTime(previous.month(previous.month()-1).date(1));
                scope.month.month(scope.month.month()-1);
                _buildMonth(scope, previous, scope.month);
            };
        }
    };
    
    function _removeTime(date) {
        return date.day(0).hour(0).minute(0).second(0).millisecond(0);
    }

    function _buildMonth(scope, start, month) {
        scope.weeks = [];
        var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
        while (!done) {
            scope.weeks.push({ days: _buildWeek(date.clone(), month) });
            date.add(1, "w");
            done = count++ > 2 && monthIndex !== date.month();
            monthIndex = date.month();
        }
    }

    function _buildWeek(date, month) {
        var days = [];
        for (var i = 0; i < 7; i++) {
            days.push({
                name: date.format("dd").substring(0, 1),
                number: date.date(),
                isCurrentMonth: date.month() === month.month(),
                isToday: date.isSame(new Date(), "day"),
                date: date
            });
            date = date.clone();
            date.add(1, "d");
        }
        return days;
    }
});

推荐答案

范围）{


scope.day = moment（）;
}）;

app.directive（ calendar， function （）{
return {
restrict： E，
templateUrl： templates / calendar.html，
范围：{
selected： =
}，
link： function （范围）{
scope.selected = _removeTime（scope.selected） || moment（））;
scope.month = scope.selected.clone（）;

var start = scope。 selected.clone（）;
start.date（ 1 ）;
_removeTime（start.day（ 0 ））;

_buildMonth（scope，start，scope.month）;

scope.select = function （day）{
scope.selected = day.date;
};

scope.next = function （）{
var next = scope.month.clone（）;
_removeTime（next.month（next.month（）+ 1））。date（ 1 ））;
scope.month.month（scope.month.month（）+ 1）;
_buildMonth（scope，next，scope.month）;
};

scope.previous = function （）{
var previous = scope.month.clone（）;
_removeTime（previous.month（previous.month（） - 1）.date（ 1 ））;
scope.month.month（scope.month.month（） - 1）;
_buildMonth（scope，previous，scope.month）;
};
}
};

function _removeTime（date）{
return date.day （ 0 ）。小时（ 0 ）。分钟（ 0 ）。second（ 0 ）。毫秒（ 0 ）;
}

function _buildMonth（scope，start，month）{
scope.weeks = [];
var done = false ，date = start.clone（），monthIndex = date.month （），count = 0 ;
while （！done）{
scope.weeks.push（{days：_buildWeek（date.clone（），month）}）;
date.add（ 1 ， w ）;
done = count ++> 2 && monthIndex！== date.month（）;
monthIndex = date.month（）;
}
}

function _buildWeek（date，month）{
var days = [];
for （ var i = 0 ; i< 7 ; i ++）{
days.push（{
name：date.format（ dd）。substring（ 0 ， 1 ），
数字：date.date（），
isCurrentMonth：date.month（）=== month.month（），
isToday： date.isSame（ new Date （）， day），
date：date
}）;
date = date.clone（）;
date.add（ 1 ， d ）;
}
返回天;
}
}）;
scope.day = moment(); }); app.directive("calendar", function() { return { restrict: "E", templateUrl: "templates/calendar.html", scope: { selected: "=" }, link: function(scope) { scope.selected = _removeTime(scope.selected || moment()); scope.month = scope.selected.clone(); var start = scope.selected.clone(); start.date(1); _removeTime(start.day(0)); _buildMonth(scope, start, scope.month); scope.select = function(day) { scope.selected = day.date; }; scope.next = function() { var next = scope.month.clone(); _removeTime(next.month(next.month()+1)).date(1)); scope.month.month(scope.month.month()+1); _buildMonth(scope, next, scope.month); }; scope.previous = function() { var previous = scope.month.clone(); _removeTime(previous.month(previous.month()-1).date(1)); scope.month.month(scope.month.month()-1); _buildMonth(scope, previous, scope.month); }; } }; function _removeTime(date) { return date.day(0).hour(0).minute(0).second(0).millisecond(0); } function _buildMonth(scope, start, month) { scope.weeks = []; var done = false, date = start.clone(), monthIndex = date.month(), count = 0; while (!done) { scope.weeks.push({ days: _buildWeek(date.clone(), month) }); date.add(1, "w"); done = count++ > 2 && monthIndex !== date.month(); monthIndex = date.month(); } } function _buildWeek(date, month) { var days = []; for (var i = 0; i < 7; i++) { days.push({ name: date.format("dd").substring(0, 1), number: date.date(), isCurrentMonth: date.month() === month.month(), isToday: date.isSame(new Date(), "day"), date: date }); date = date.clone(); date.add(1, "d"); } return days; } });





结果未到来



我尝试了什么：



我试过了



我的查看页面位于下方



The result is not coming

What I have tried:

I have tried

My View page is below

<title>   
    <div class="header">
        
        <span>{{month.format("MMMM, YYYY")}}</span>
        
    </div>
    <div class="week names">
        <span class="day">Sun</span>
        <span class="day">Mon</span>
        <span class="day">Tue</span>
        <span class="day">Wed</span>
        <span class="day">Thu</span>
        <span class="day">Fri</span>
        <span class="day">Sat</span>
    </div>
    <div class="week">
        <span class="day">{{day.number}}</span>
    </div>





我的Js文件





My Js file

var app = angular.module("demo", []);

app.controller("calendarDemo", function(


scope）{


这篇关于如何使用带MVC4的angularjs创建日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆