UI-Calendar 使用說明

安裝套件: fullcalendar, UI-Calendar

javascript
====
 <script type='text/javascript' src="Scripts/moment.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/fullcalendar.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/gcal.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/locale/zh-tw.js"></script>
    <link href="content/fullcalendar.min.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src="Scripts/calendar.js"></script>
angular.module('module1', ['ui.calendar', 'ui.bootstrap'])
            .controller("ctrl1", function ($scope, $http, $filter, $compile, $timeout, uiCalendarConfig) {
$scope.eventRender = function (event, element, view) {
                    element.attr({
                        'title': event.title,
                        'tooltip-append-to-body': true,
                    });
                    $compile(element)($scope);
                };
 $scope.getCalendar = function () {
                    if ($scope.eventSources.length > 0) $scope.eventSources.splice(0, $scope.eventSources.length);
                    $http.post('...', { from: $scope.from || null, to: $scope.to || null })
                        .then(function (result) {
                            $scope.eventSources.push(result.data);
                        });
                }
                $scope.uiConfig = {
                    calendar: {
                        displayEventTime: false,
                        eventRender: $scope.eventRender,
                        viewRender: function (view, element) {
                             if (!$scope.from || $scope.from.toLocaleString() != view.start.toLocaleString()) {

                    $scope.from = view.start;

                    $scope.to = view.end;

                    $scope.getCalendar();

                }

                        },
                        dayClick: function (date, allDay, jsEvent, view) {
                            $scope.date = new Date(date);
 $('td.fc-past,td.fc-future').css({ "color": "unset", "backgroundColor": "unset" });
                            $('td.fc-today').css({ "color": "unset", "backgroundColor": "#fcf8e3" });
                            var MyDateString = $scope.date.getFullYear() + '-'
                                + ('0' + ($scope.date.getMonth() + 1)).slice(-2)
                                + "-" + ('0' + $scope.date.getDate()).slice(-2);
                            $('[data-date=' + MyDateString + ']').css({ "color": "red", "backgroundColor": "yellow" });
                        },
                        eventClick: function (event) {
                        }
                    }
                };
                $scope.eventSources = [];

html
====
<div ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources" calendar="myCalendar"></div>

c#
====
var list = db.table1.Where(a => ...).AsEnumerable().Select(a => new { title =a.title, start = a.date1, end = a.date2, backgroundColor = "orange" });