首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ToastUI日历依赖项需求

ToastUI日历依赖项需求
EN

Stack Overflow用户
提问于 2020-04-16 03:58:23
回答 1查看 1.9K关注 0票数 1

我试图使用此处可用的Toast日历:https://github.com/nhn/tui.calendar我尝试通过CDN使用它,这需要我们插入以下内容:

代码语言:javascript
复制
<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代码片段作为这个日历的依赖项:https://github.com/nhn/tui.calendar#-dependency,但是,我不知道从tui代码片段中确切地包含了什么,因为里面有很多函数,他们说我们只应该从其中导入我们需要的函数:https://github.com/nhn/tui.code-snippet#-usage

如果能在这方面提供任何帮助,我们将不胜感激。

编辑:我还添加了以下tui代码片段文件,这只会帮助我获得显示/呈现日历,但所有功能仍然缺失:

代码语言:javascript
复制
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-17 08:28:37

代码缺少一些js链接,例如:

代码语言:javascript
复制
    <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实例,然后根据需要发布自定义选项。这方面的一个例子可以是:

代码语言:javascript
复制
    <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>

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61242450

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档