Clndr.js - 加载json数据 [英] Clndr.js - load json data

问题描述

各位大家好，我正在尝试从CLNDR.js中的json文件加载外部数据。虽然json文件已成功加载，但日历似乎不会响应加载的数据。我想知道json的格式是否有问题。

以下是 CLNDR 上的原始代码（site.js）：

Hello everybody, I'm trying to load external data from json file in CLNDR.js. Although the json file was successfully loaded, the calendar somehow does not seems to be responding to the loaded data. I wonder if there's anything wrong with the format of json.
Below is the original code on CLNDR (site.js):

var clndr = {};

$( function() {

  // PARDON ME while I do a little magic to keep these events relevant for the rest of time...
  var currentMonth = moment().format('YYYY-MM');
  var nextMonth    = moment().add('month', 1).format('YYYY-MM');

  var events = [
    { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
    { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
    { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
    { date: nextMonth + '-' + '07',    title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
  ];

  clndr = $('#full-clndr').clndr({
    template: $('#full-clndr-template').html(),
    events: events,
    forceSixRows: true
  });

  $('#mini-clndr').clndr({
    template: $('#mini-clndr-template').html(),
    events: events,
    clickEvents: {
      click: function(target) {
        if(target.events.length) {
          var daysContainer = $('#mini-clndr').find('.days-container');
          daysContainer.toggleClass('show-events', true);
          $('#mini-clndr').find('.x-button').click( function() {
            daysContainer.toggleClass('show-events', false);
          });
        }
      }
    },
    adjacentDaysChangeMonth: true,
    forceSixRows: true
  });

  $('#clndr-3').clndr({
    template: $('#clndr-3-template').html(),
    events: events,
    showAdjacentMonths: false
  });

  // $('#clndr-4').clndr({
  //   template: $('#clndr-4-template').html(),
  //   events: events,
  //   lengthOfTime: {
  //     days: 7,
  //     interval: 7
  //   }
  // });
});

我尝试过：



我编辑的代码：

What I have tried:

My edited code:

var clndr = {};

$( function() {

  var json;

  $.getJSON('events.json', function (data) {
      json = data;
  })
  .error(function() {
      console.log('%cerror: Cannot load JSON data', 'color:red'); 
  })
  .done(function() {
      console.log('%cSuccessfully loaded JSON data', 'color:green');
  console.log(json);
  });

  $('#mini-clndr').clndr({
    template: $('#mini-clndr-template').html(),
    events: json,
    clickEvents: {
      click: function(target) {
        if(target.events.length) {
          var daysContainer = $('#mini-clndr').find('.days-container');
          daysContainer.toggleClass('show-events', true);
          $('#mini-clndr').find('.x-button').click( function() {
            daysContainer.toggleClass('show-events', false);
          });
        }
      }
    },
    adjacentDaysChangeMonth: true,
    forceSixRows: true
  });
});

对应的json文件：

Corresponding json file:

[
  {
    "date": "8-1-2017",
    "title": "Test",
    "location": "Nowhere"
  },
  {
    "date": "8-2-2017",
    "title": "Cat Frisbee",
    "location": "Jefferson Park"
  }
]

直播网站：

CLNDR [ ^ ]

推荐答案

（function（）{

// PARDON ME虽然我做了一些魔术让这些事件在剩下的时间保持相关...
var currentMonth = moment（）。format（ 'YYYY-MM'）;
var nextMonth = moment（）。add（'month'，1）.format（'YYYY-MM'）;

var events = [
{日期：currentMonth +' - '+'10'，标题：'波斯小猫拍卖'，位置：'美丽猫的中心'}，
{日期：currentMonth +' - '+'19'，标题：'Cat Frisbee'，位置：'Jefferson Park'}，
{日期：currentMonth +' - '+'23'，标题：'Kitten Demonstration'，位置：'美丽猫中心'}，
{日期：nextMonth +' - '+'07'，标题：'小猫照相会'，地点：'猫摄影中心'}
];

clndr =

( function() { // PARDON ME while I do a little magic to keep these events relevant for the rest of time... var currentMonth = moment().format('YYYY-MM'); var nextMonth = moment().add('month', 1).format('YYYY-MM'); var events = [ { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' }, { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' }, { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' }, { date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' } ]; clndr =

（'＃full-clndr'）。clndr（{
template：

('#full-clndr').clndr({ template:

（'＃full-clndr-template'）。html（），
events：events，
forceSixRows：true
}）;

('#full-clndr-template').html(), events: events, forceSixRows: true });

这篇关于Clndr.js - 加载json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！