CLNDR - 如何将事件信息传递给单独的 DIV？

Question

我目前正在整理一个页面，该页面将使用 CLNDR 插件 (http://kylestetz.github.io/CLNDR/)，一个用于创建自定义日历的 jQuery 插件 ('clndr.js')。

该页面是一个 .html 页面，然后 javascript 将其插入到 .php 文件中。我必须使用 .php，因为我们的服务器在 .html 文件中没有运行 php 代码。

'clndr.js'使用了'moments.js'、'underscore.js'和kylestetz提供的文件'site.js'以及插件。 'site.js' 包含事件信息（'clndr.js' 生成的日历中要使用的事件日期），数组如下：

var eventArray = [
{ date: '2015.07.25', title: 'Artpolis Kick-off', location: ' ott. 2.', url: 'esemeny/esemeny_reszletes_150535_01.html', type: 'holiday' },
{ date: '2015.06.25', title: 'Smartpolis Kick-off', location: ' SZTNH, Bp., Garibaldi u. 2.', url: 'esemeny/esemeny_reszletes_150535_01.html'},
{ date: '2015.05.26', title: 'ŰR-LÉPTÉK ', location: 'BME K ép. díszterem ', url: 'esemeny/ ' },
{ date: '2015.05.21', title: 'Smart City tagozat', location: ' BME V1 ép. Neumann tárgyaló.', url: 'esemeny/ '  },
{ date: '2015.02.13', title: 'H-SPACE 2015 ', location: ' BME I ép. előadó.', url: 'esemeny/ '  }];

这个 'site.js' 文件还定义了放置日历的位置：

（抱歉，有时我可以使代码格式化工作，有时不能）

calendars.clndr2 = $('.cal2').clndr({
template: $('#template-calendar').html(),
events: eventArray,

这是我在 .php 文件的 HEAD 部分使用的 javascript 来插入包含日历的 .html 文件：

（抱歉，有时我可以使代码格式化工作，有时不能）

<script> 
$(function(){
  $("#includedContentCalendar").load("../test-clndr-example.html"); 
});

在正文部分：

<div class="col-sm-3 col-md-3 col-lg-3">
<h2>Calendar</h2>
<div id="includedContentCalendar"></div>
</div>

CLNDR在'site.js'文件中有一个click事件，可以用来将存储在数组中的事件信息传递给浏览器控制台：
```
clickEvents: {
click: function(target) {
console.log(target);
}
},
```
现在，我希望此 clickevents 在单独的 <div id="event information"> 中显示 .html 页面上的事件信息。当单击数组中附加了事件的日期时，将在此处显示事件信息。

我在 "manual" 中找不到执行此操作的说明，我是从 github 转到此论坛的。

请问如何将存储在'site.js'中的事件信息传递给.html文件中的特定DIV ID？

Answer 1

click 处理程序被赋予一个变量 target，其中包含一组 events（可能有多个事件）。

这是一个关于如何获取第一个事件的标题并将其设置为 div:

的示例

click: function(target) {
    var info = target.events[0].title;
    $("#event-information").text(info);
}

注意：id 中不能有空格，因此我们使用 <div id="event-information"> 代替。

演示：http://jsfiddle.net/alan0xd7/yfL9njce/

更新：

这里有一个关于如何使用 url 和建立链接的例子：

click: function(target) {

    var title = target.events[0].title;
    var url = target.events[0].url;

    var link = $("<a>"); // create a link tag
    link.text(title); // set the title
    link.attr("href", url); // set the url

    $("#event-information").html(link);

}

请注意，我们这次使用了 .html()，因为我们现在插入的是 HTML 代码（而不是像上次那样只插入文本）。

演示：http://jsfiddle.net/alan0xd7/yfL9njce/3/

CLNDR - 如何将事件信息传递给单独的 DIV？

CLNDR - how to pass event info to a separate DIV?

html

javascript

jquery

calendar