如何传递事件信息到一个单独的DIV

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

本文关键字：一个 单独 DIV 事件 何传递 信息      更新时间：2023-09-26

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

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

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

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

(对不起，有时我可以使代码格式化工作，有时不)

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在'site.js'文件中有一个click事件，可以用来将存储在数组中的事件信息传递给浏览器控制台:

    clickEvents: {
click: function(target) {
console.log(target);
}
},

  • 现在，我希望这个clickevents在。html页面上显示事件信息，在单独的<div id="event information">中。在这里，当一个日期在数组中被附加了一个事件时，事件信息将被显示。

    • 我在"手册"中没有找到这样做的描述，我从github被引导到这个论坛。

    你能建议如何传递事件信息存储在'site.js'到一个特定的DIV ID在。html文件?

    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/

    相关文章：