找到你要的答案

Q:How to display events in calendar in Angular JS?

Q:如何在角的JS日历显示事件吗?

I use a calendar bootstap

How I can to display all events at calendar from AJAX? I guess I need to fill array events from response AJAX?

My PHP:

     foreach($calendar as $val){
                    $this->outputData["calendar"][] = array(
                        "title" => $val->DetailToUsersName,
                        "type" => 'info',
                        "startsAt" => "Sat Jun 01 2015 01:00:00 GMT+0500",
                        "endsAt" => "Sat Jun 01 2016 01:00:00 GMT+0500",
                        "resizable" => true,
                        "incrementsBadgeTotal" => true,
                        "recursOn" => 'year'
                    );
                }

echo json_encode($this->outputData);

我用一个日历bootstap

How I can to display all events at calendar from AJAX? I guess I need to fill array events from response AJAX?

我的PHP:

     foreach($calendar as $val){
                    $this->outputData["calendar"][] = array(
                        "title" => $val->DetailToUsersName,
                        "type" => 'info',
                        "startsAt" => "Sat Jun 01 2015 01:00:00 GMT+0500",
                        "endsAt" => "Sat Jun 01 2016 01:00:00 GMT+0500",
                        "resizable" => true,
                        "incrementsBadgeTotal" => true,
                        "recursOn" => 'year'
                    );
                }

echo json_encode($this->outputData);
answer1: 回答1:

Yes, you need to convert your AJAX response to the format defined in bootstrap calendar docs:

$scope.events = [
  {
    title: 'My event title', // The title of the event
    type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
    startsAt: new Date(2013,5,1,1), // A javascript date object for when the event starts
    endsAt: new Date(2014,8,26,15), // Optional - a javascript date object for when the event ends
    editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable.
    deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
    draggable: true, //Allow an event to be dragged and dropped
    resizable: true, //Allow an event to be resizable
    incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
    recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
    cssClass: 'a-css-class-name' //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
  }
];

是的,你需要将你的Ajax响应引导日历文档定义的格式:

$scope.events = [
  {
    title: 'My event title', // The title of the event
    type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
    startsAt: new Date(2013,5,1,1), // A javascript date object for when the event starts
    endsAt: new Date(2014,8,26,15), // Optional - a javascript date object for when the event ends
    editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable.
    deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
    draggable: true, //Allow an event to be dragged and dropped
    resizable: true, //Allow an event to be resizable
    incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
    recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
    cssClass: 'a-css-class-name' //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
  }
];
angularjs