Question

我目前正在整理一个页面，该页面将使用CLNDR插件（http://kylestetz.github.io/CLNDR/），一个jQuery插件（＆＃39; clndr.js＆＃39;）来创建自定义日历。

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

＆＃39; clndr.js＆＃39;使用＆＃39; moments.js＆＃39;，＆＃39; underscore.js＆＃39;和一个文件＆＃39; site.js＆＃39;由kylestetz提供的插件。这个＆＃39; site.js＆＃39;包含事件信息（在＆＃39; clndr.js＆＃39;生成的日历中使用事件的日期），如下所示：

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/ '  }];

这个＆＃39; site.js＆＃39;文件还定义了日历的放置位置：

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

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

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

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

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

并在BODY部分：

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

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

我没有在＆＃34;手册＆＃34;中找到执行此操作的说明，我从github被引导到此论坛。

您能否告知如何传递存储在＆＃39; site.js＆＃39;中的事件信息。到.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？

1 个答案: