如何在Fullcalendar中为事件添加一点可点击的交叉?

时间:2013-12-18 04:14:39

标签: javascript jquery calendar fullcalendar

如何在fullcalender中为事件添加一点点。

所以我点击它并执行一个动作。

这样的事情:

enter image description here

有可能吗?

我的代码:

$(document).ready(function() {

        $('#calendar').fullCalendar({
        // ----- This Paramenter is Used for displaying Next,Previous,Today,Month,Week & Day ------ //  
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay',
            ignoreTimezone: false
        },
        selectable  : true,
        selectHelper: true,         
        editable    : true,
        firstDay    : 1,

        // ----- This Paramenter is Used for displaying Source Response ------ //   
        eventSources: [
                        'ajax/schedule_tasts.php',
                       ],

});

1 个答案:

答案 0 :(得分:0)

这个例子来自 charlietfl ,看起来是正确的,但要做你想要的事情你需要为每个事件添加一个不同的属性,比如ID,所以当你点击它时你会知道什么事件会采取行动。我修改了这个,所以你可以点击它。

  .eventButtons {
      background: #3498db;
      background-image: -webkit-linear-gradient(top, #3498db, #3A87AD);
      background-image: -moz-linear-gradient(top, #3498db, #3A87AD);
      background-image: -ms-linear-gradient(top, #3498db, #3A87AD);
      background-image: -o-linear-gradient(top, #3498db, #3A87AD);
      background-image: linear-gradient(to bottom, #3498db, #3A87AD);
      -webkit-border-radius: 10;
      -moz-border-radius: 10;
      border-radius: 10px;
      -webkit-box-shadow: 0px 2px 3px #000000;
      -moz-box-shadow: 0px 2px 3px #000000;
      box-shadow: 0px 2px 3px #000000;
      color: #ffffff;
      font-size: 12px;
      padding: 2px 8px 2px 8px;
      text-decoration: none;

    }

    .eventButtons:hover {
      text-decoration: none;
    }
</style>
<script>
  $(function() {



    var events=[{
      id:1,
      title:'Simple event',
      start: new Date()
    }]

     $('#calendar').fullCalendar({
       events:events,
       eventAfterRender:function( event, element, view ) {

         element.append('<input class="eventButtons" type="button" value="X" name="button" onclick="alert()"/>')

       }
    })

});
</script>