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>

Bootstrap年日历-工作示例

1 个答案: