Bootstrap年日历-工作示例

Question

我希望实现Bootstrap Year Calendar，但我不能理解如何让它工作。我已经下载了源文件，我可以让日历显示在屏幕上-但我不能让任何东西启动，选择不起作用，现有的事件不显示-根据网站上的“事件”示例。

http://www.bootstrap-year-calendar.com/#Examples/Events

如果有人能给我指出一个有效的例子，那将不胜感激。提前致谢:-)

Answer 1

这是日历的工作说明。

https://github.com/year-calendar/js-year-calendar

<div data-provide="calendar"></div>

<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
<script>
    import Calendar from 'js-year-calendar';
    import 'js-year-calendar/dist/js-year-calendar.css';

    $( document ).ready(function() {
        $('#calendar').calendar();
    });

    $(function() {
        var currentYear = new Date().getFullYear();

        var redDateTime = new Date(currentYear, 2, 13).getTime();
        var circleDateTime = new Date(currentYear, 1, 20).getTime();
        var borderDateTime = new Date(currentYear, 0, 12).getTime();

        new Calendar('#calendar').calendar({
            customDayRenderer: function(element, date) {
                if(date.getTime() == redDateTime) {
                    $(element).css('font-weight', 'bold');
                    $(element).css('font-size', '15px');
                    $(element).css('color', 'green');
                }
                else if(date.getTime() == circleDateTime) {
                    $(element).css('background-color', 'red');
                    $(element).css('color', 'white');
                    $(element).css('border-radius', '15px');
                }
                else if(date.getTime() == borderDateTime) {
                    $(element).css('border', '2px solid blue');
                }
            }
        });
    });
</script>