0

我正在尝试使用此处提供的 Toast UI 日历： https ://github.com/nhn/tui.calendar 我尝试通过 CDN 使用它，这需要我们插入以下内容：

<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />

<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />

<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>

当我尝试在我的 html 文件中创建日历时，我注意到它缺少一些功能，例如日期选择器、渲染范围，甚至是事件调度程序弹出窗口。我还注意到他们将 tui-code-snippet 称为此日历的依赖项： https ://github.com/nhn/tui.calendar#-dependency 但是，我不确定要从 tui-code 中包含哪些内容-snippet 确切地说，因为那里有一堆函数，他们声明我们应该只从中导入我们需要的函数： https ://github.com/nhn/tui.code-snippet#-usage

对此的任何帮助将不胜感激。

编辑：我还添加了以下 tui-code-snippet 文件，这仅帮助我让日历显示/渲染，但仍然缺少所有功能：

<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
4

1 回答 1

1

该代码缺少一些 js 链接，例如：

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>

附加这些链接后，我们只需要创建一个tui.calendar实例，然后根据需要发布自定义选项。这样的一个例子可以是：

    <script type="text/javascript">
    var cal, resizeThrottled;
    var useCreationPopup = true;
    var useDetailPopup = true;
    var datePicker, selectedCalendar;

    cal = new tui.Calendar('#calendar', {
    defaultView: 'week',
    useCreationPopup: useCreationPopup,
    useDetailPopup: useDetailPopup,
    calendars: CalendarList,
    template: {
        milestone: function(model) {
            return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
        },
        allday: function(schedule) {
            return getTimeTemplate(schedule, true);
        },
        time: function(schedule) {
            return getTimeTemplate(schedule, false);
        }
    }
});
</script>

它应该可以很好地加载日历，并允许将事件添加到调度程序。我希望这可以帮助其他陷入类似问题的人。

于 2020-04-17T08:28:37.170 回答