jquery - fullcalendar，在工具栏后插入复选框

Question

我正在修改 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>

这部分是我可以在任何需要的地方插入的函数:

    <?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 
    }

    ?>

Answer 1

您可以在呈现日历标题之后添加复选框。

所以我没有仔细查看您的 PHP...我不得不承认。
但我举了一个例子，我在月份导航按钮的右侧添加了一个复选框。

// Instantiate FullCalendar... With the options you want.
$("#calendar").fullCalendar();

// Here, create the chexboxes and its container, label, etc.
// You can do it using PHP.
var checkboxContainer = $("<div class='checkboxContainer'><label for='checkme'>My Checkbox:</label><input type='checkbox' id='checkme' name='checkme'></div>");

// Append it to FullCalendar.
$(".fc-right").append(checkboxContainer);

// A click handler on the checkbox... For fun.
$(document).on("click", "#checkme", function(){
  if( $(this).is(":checked") ){
    alert("Outch! That hurts!");
  }else{
    alert("What a relief...");
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

<div id="calendar"></div>