Jquery 完整日历，在工具栏后插入复选框

我正在修改fullcalendar以使用事件筛选复选框。一切都很完美。我的问题是，我希望能够将复选框放在日历中，以便它们显示在日历控件之后，而不是上面。我可以使用css和绝对定位来实现这一点，但我遇到的问题是在不同的设备上，有时标题很长，会创建另一行，从而偏离定位。我想找到一种方法，用jquery插入复选框html

问题是：在呈现事件之前，元素还不能用于附加新的html。如果在事件渲染后移动附加，则会出现复选框，但它们不起作用，因为该函数是在事件渲染期间调用的。我已附上我的代码供审查：

 <script>
                jQuery(document).ready(function($) {
                    $('input[class=event_filter_box]').change(function() {
                        $('#calendar').fullCalendar('rerenderEvents');
                    });

                    $("#calendar").fullCalendar({
                    displayEventEnd: true,
                    timeFormat: 'h:mm A',
                    events: [
                        <?php ds_calendar_events(); ?>
                    ],
                    theme: true,
                    //aspectRatio: 1.2,
                    <?php if( wp_is_mobile() ) : ?>
                        header: {
                        left: 'listWeek,today',
                        center: 'title',
                        right: 'prev,next'
                            },
                    <?php else : ?>
                        header: {
                        left: 'basicWeek,listWeek,today',
                        center: 'title',
                        right: 'prev,next'
                            },
                    <?php endif; ?>

                    defaultDate: '<?php echo date('Y-m-d'); ?>',
                    <?php if( wp_is_mobile() ) : ?>
                        defaultView: 'listWeek',
                    <?php else : ?>
                        defaultView: 'basicWeek',
                    <?php endif; ?>
                    views: {
                        basicWeek: {
                            titleFormat: 'MMMM YYYY'
                        },
                        listWeek: {
                            titleFormat: 'MMMM YYYY'
                        }
                    },
                    viewRender: renderViewColumns,

                    eventRender: function eventRender( event, element, view ) {

                        var display = true;
                        var cats = [];

                        // Find all checkbox that are event filters that are enabled
                        // and save the values.
                        $("input[name='event_filter_select']:checked").each(function () {
                            // I specified data-type attribute in above HTML to differentiate
                            // between locations and kinds of events.

                            // Saving each type separately
                            if ($(this).data('type') == 'cat') {
                                cats.push($(this).val());
                            };

                        });

                            // If there are specific types of events
                            if (cats.length) {
                                display = display && cats.indexOf(event.cat) >= 0;
                            }

                            return display;

                        },

                    });

                    function renderViewColumns(view, element) {
                        element.find('.fc-day-header').each(function() {
                            var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
                            $(this).html(buildDateColumnHeader(theDate));
                        });

                        function buildDateColumnHeader(theDate) {
                            var container = document.createElement('div');
                            var DD = document.createElement('div');
                            var ddd = document.createElement('div');
                            DD.textContent = theDate.format('DD');
                            ddd.textContent = theDate.format('dddd').toUpperCase();
                            container.appendChild(DD);
                            container.appendChild(ddd);
                            DD.className = 'ds-header-day';
                            ddd.className = 'ds-header-month';

                            return container;
                        }
                    }

                });
                </script>

jQuery（文档）.ready（函数（$）{
$（'input[class=event\u filter\u box]'）。更改（函数（）{
$（“#日历”）.fullCalendar（'rerendervents'）；
});
$（“#日历”）.fullCalendar({
displayEventEnd:true，
时间格式：“h:mm A”，
活动：[
],
主题：真的，
//方面：1.2，
标题：{
左：“listWeek，今天”，
中心：'标题'，
右图：“上一页，下一页”
},
标题：{
左图：“基本周、列表周、今天”，
中心：'标题'，
右图：“上一页，下一页”
},
默认日期：“”，
defaultView:“listWeek”，
defaultView:'basicWeek'，
观点：{
基本周：{
标题格式：“MMMM YYYY”
},
列表周：{
标题格式：“MMMM YYYY”
}
},
viewRender:renderViewColumns，
eventRender：函数eventRender（事件、元素、视图）{
var显示=真；
var=cats[]；
//查找所有已启用的事件筛选器复选框
//并保存这些值。
$（“输入[name='event\u filter\u select']：选中”）。每个（函数（）{
//我在上面的HTML中指定了数据类型属性来区分
//地点和事件类型之间的差异。
//分别保存每种类型
if（$（this）.data（'type'）=='cat'）{
cats.push（$（this.val（））；
};
});
//如果有特定类型的事件
如果（猫的长度）{
display=display&&cats.indexOf（event.cat）>=0；
}
返回显示；
},
});
函数renderViewColumns（视图、元素）{
查找（'.fc day header'）。每个（函数（）{
var theDate=时刻（$（this.data（'date'））；/*th.data date=“YYYY-MM-DD”*/
$（this.html（buildDateColumnHeader（theDate））；
});
函数buildDateColumnHeader（theDate）{
var container=document.createElement（'div'）；
var DD=document.createElement（'div'）；
var ddd=document.createElement（'div'）；
DD.textContent=日期格式（“DD”）；
ddd.textContent=date.format（'dddddd'）.toUpperCase（）；
子容器（DD）；
容器.附件（ddd）；
DD.className='ds header day'；
ddd.className='ds header month'；
返回容器；
}
}
});

这部分是一个我可以在任何需要的地方插入的功能：

    <?php 
    /**
 * Get Event Categories to Create Filter 
 */

    function ds_event_categories() {
        $cat_args = array (
        'orderby' => 'term_id', 
        'order' => 'ASC',
        'hide_empty' => true, 
    );

    $terms = get_terms( 'event-categories', $cat_args ); ?>

    <ul class="ds-event-categories">

    <?php 
        // Loop through each category
        foreach( $terms as $taxonomy ):
            $termID = $taxonomy->term_id;

            global $wpdb;
                $wpdb->em_meta = $wpdb->prefix . 'em_meta';
                $color = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM $wpdb->em_meta WHERE object_id = %s", $termID  ), ARRAY_N );
                $catColor = $color[3];

              ?>
        <li id="cat<?php echo $termID; ?>">
            <style>
            #cat<?php echo $termID; ?> input[type="checkbox"]:checked {
                background: <?php echo $catColor; ?>;
            }
            </style>
            <label>
                <input id="<?php echo $taxonomy->slug; ?>" class="event_filter_box" name="event_filter_select" type="checkbox" value="<?php echo $taxonomy->slug; ?>" data-type="cat" checked />
                <?php echo $taxonomy->name; ?>
            </label>
        </li>
        <?php endforeach; ?>
    </ul>
    <?php 
    }

    ?>

渲染后，可以在日历标题中添加复选框

所以我没有仔细看你的PHP。。。我不得不承认。

但我举了一个例子，在月份导航按钮的右侧添加了一个复选框


//实例化完整日历。。。有你想要的选择。
$（“#日历”）.fullCalendar（）；
//在这里，创建chexbox及其容器、标签等。
//您可以使用PHP来实现。
var checkboxContainer=$（“我的复选框：”）；
//将其附加到FullCalendar。
$（“.fc right”）.append（checkboxContainer）；
//复选框上的单击处理程序。。。为了好玩。
$（文档）。在（“单击”，“检查我”，函数（）上）{
如果（$（this）.is（“：checked”））{
警惕（“吐！疼死了！”）；
}否则{
警惕（“多么令人宽慰……”）；
}
});

这让我走得更远了，我做了一些更改，但无法使用复选框渲染事件。我制作了一把小提琴，向你展示你接近的结果。但是您的
filter（）
函数不能这样工作，因为
eventRender:function（）
执行了多次。。。事实上，它是一个循环，一个接一个地遍历所有日期。所以只要一些
if/else
就能很好地完成这项工作。然后，单击复选框