2013-12-18 18 views
0

如何在fullcalender中将事件放在一个小十字上。如何在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', 
         ], 

}); 
+0

可以发布您的代码? – SeeTheC

+0

确定在一分钟内 –

+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> 
相关问题