微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – Fullcalendar – 突出显示基于事件选择的一天

在fullcalendar中,您可以选择一个事件(触发)eventClick函数/回调.我想做的是突出事件点击日期(在月视图中).

例如,如果事件是在10月30日,并且我选择事件,我想要突出显示的一天的背景颜色.这非常类似于fullcalendar如何处理今天的“今天”,今天以淡黄色亮起.

我似乎无法弄清楚如何将fc-event类或事件对象本身绑定到日历中的实际日div.我的10月30日事件出现在下面的div(这是10月30日的框)中:

<div class="fc-sun fc-widget-content fc-day35 fc-first">

基于事件对象,如何找到这个div(以便我可以突出显示它)?

解决方法

对不起,这是一个粗略的解决方案,大部分来自内存,因为我没有在这台电脑上安装任何开发工具.

希望这是你要找的!

//create fullCalendar:
$("#calendar").fullCalendar({
    /* options */

    eventClick: function(event,jsEvent){
        //use the passed-in javascript event to get a jQuery-wrapped reference
        //to the DOM element we clicked on.
        //i can never remember if this is .target,.currentTarget,or .originalTarget
        //... jquery has spoiled me
        var $clickedEvent = $(jsEvent.target);

        //tell the "selectionManager" to find the day this event belongs to,//and add the "selected" css class to it
        selectionManager.select($clickedEvent);
    }
});

//define an object that handles the adding-removing of the 'selectedDay' css class
var selectionManager = (function(){
    //i like making private variables :-)
    var $curSelectedDay = null

    //define a "select" method for switching 'selected' state
    return {
        select: function($newEvent) {
            if ($curSelectedDay){
                //if we already had a day chosen,let's get rid of its CSS 'selectedDay' class
                $curSelectedDay.removeClass("selectedDay");
            }
            //find the parent div that has a class matching the pattern 'fc-day',and add the "selectedDay" class to it
            $curSelectedDay = $thisEvent.closest('div[class~="fc-day"]').addClass("selectedDay");
        }       
    };
})();

原文地址:https://www.jb51.cc/jquery/179442.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐