Wordpress管理页面的FullCalendar样式问题

时间:2014-09-01 06:39:02

标签: fullcalendar wordpress

我想在Wordpress中的管理页面上添加FullCalendar UI。但是,虽然它加载,但它的样式未启用。例如,今天接下来的标题选项如prev,根本不可见。

这里出现问题的原因是什么?

任何帮助将不胜感激

enter image description here

1 个答案:

答案 0 :(得分:0)

您必须正确排队脚本和样式。第一个脚本已注册,然后作为start-js的依赖项排队,这是触发日历的自定义JS。不要将外部jQuery排队,使用与WP捆绑在一起的那个。

add_action('admin_menu', function() 
{
    $hook = add_menu_page( 
        'FC', 
        'FC', 
        'add_users', 
        'fc_admin',
        'render_page', 
        'http://i.stack.imgur.com/s2ons.png'
    );

    add_action( "admin_print_scripts-$hook", function()
    {
        wp_enqueue_style( 'ui-css', plugins_url( '/lib/cupertino/jquery-ui.min.css', __FILE__ ) );
        wp_enqueue_style( 'full-css', plugins_url( '/fullcalendar.css', __FILE__ ) );
        wp_register_script( 'moment-js', plugins_url( '/lib/moment.min.js', __FILE__ ) );
        wp_register_script( 'full-js', plugins_url( '/fullcalendar.min.js', __FILE__ ) );
        wp_enqueue_script( 'start-js', plugins_url( '/start.js', __FILE__ ), array( 'jquery', 'moment-js', 'full-js' ) );
    });
});

function render_page()
{
    ?>
    <h2>Full Calendar</h2>
    <div id='calendar'></div>
    <?php
}

start.js文件:

jQuery(document).ready(function($) {
    $('#calendar').fullCalendar({ /* SETTINGS */ });
});