热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

FullCalendar视图未在加载时显示

如何解决《FullCalendar视图未在加载时显示》经验,为你挑选了1个好方法。

我正在使用FullCalendar来处理我正在进行的新网站.我有两个带日历的div.第一个按预期加载......没有问题.第二个是问题.它使用按钮和标题加载标题,但视图div为空.我检查了错误,没有人被抛出.如果单击任何标题按钮,视图将按预期显示.我想也许这是两个日历之间的冲突,而且似乎不是问题.请参阅下面的代码,让我知道您的想法.我正在使用Parse后端,它似乎工作正常,和jQuery.事件调用相同的函数来加载事件,它也正常工作.

第一个日历代码:

       $('#calendar').fullCalendar({    
            timezone: 'local',
            events: function( start, end, timezone, callback ) {        
                callback(getEvents(events, start, end));
            },
            color: 'lightBlue',
            textColor: 'gray',
            eventMouseover: function( calEvent, jsEvent, view ) {
                var $target = $(jsEvent.target).css('cursor', 'pointer');
                var location = userData.locations[calEvent.location.id];
                var event = userData.events[calEvent.eventData.id];
                var optiOns= {
                    items: $target.parent(),
                    content: function() {
                        var info = "Event: " + calEvent.title + "
" + calEvent.description + "

Date: " + moment(calEvent.start).format("MM/DD/YYYY h:mma - ") + moment(calEvent.end).format("h:mma") + '
Frequency: ' + event.get('eventFrequency') + '
Frequency End Date: ' + moment(event.get('eventEndDate')).format('MM/DD/YY') + '
Location:
' + location.get("locationName") + '
' + location.get('locationAddress') + location.get('locationAddress2') + "
" + location.get('locationCity') + ', ' + location.get('locationState') + ' ' + location.get('locationCountry') + ' ' + location.get('locationPostalCode') + "

Click Event to Edit"; return info; } }; $(view.el).tooltip(options); }, eventMouseout: function( calEvent, jsEvent, view ) { $(view.el).tooltip('destroy'); }, eventClick: function(calEvent, jsEvent, view) { console.log(calEvent); console.log(jsEvent); console.log(view); userData.currentLocation = {}; var location = userData.currentLocation['location'] = userData.locations[calEvent.location.id]; var query = new Parse.Query('Event'); query.equalTo('user', currentUser); query.equalTo('parent', location); query.find().then(function(events) { userData.currentLocation.events = events; addRow(calEvent.eventData); $('#add-location').text('Back to Calender').off().one('click',showCalendar); }, function(error) { errorMessage(error); }); }, header: { left: 'title', center: '', right: 'today prev,next' }, buttonIcons: { prev: 'left-single-arrow', next: 'right-single-arrow', }, dayClick: function(date, jsEvent, view) { } });

加载截图...完美的工作.

加载截图...完美的工作.

第二个日历......不是那么多.这是代码:

    $('#kp-agenda-view').fullCalendar({
            header: {
                left:   'prev,next today',
                center: 'title',
                right:  'month,agendaWeek,agendaDay'
            },
            defaultDate: '05-05-2015',
            allDay: false,
            color: 'lightBlue',
            textColor: 'gray',
            timezone: 'local',
            overlap: false,
            editable: true,
            buttonIcons: {
                prev: 'left-single-arrow',
                next: 'right-single-arrow',
            },
            events: function(start, end, timezone, callback) {
                callback(getEvents(userData.currentLocation.events, start, end));
            },
        })

查看未加载

单击任何标题按钮(我点击'今天')后...视图已加载

单击标题按钮后查看已加载

不确定发生了什么,我似乎无法在网上找到任何类似的条目.在此先感谢,如果需要更多信息,请告诉我.



1> 小智..:

我知道这有点太晚了但是看看这个问题: Twitter引导程序选项卡 中的FullCalendar如果它在一个未显示的元素中,似乎不会加载fullcalendar.如果是这种情况,简单的'霰弹枪'解决方案是强制渲染通过

$('#kp-agenda-view').fullCalendar('render');

当日历显示时.


推荐阅读
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • Django多条件筛选查询主模型只存在外键一对多关系模型设计#快捷筛选状态classStatus(models.Model):order_numbermodels.Positive ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件,并提供了完整的代码示例。作者:多测师_王sir,时间:2020年5月20日 17:24,微信:15367499889,公司:上海多测师信息有限公司。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • Python 序列图分割与可视化编程入门教程
    本文介绍了如何使用 Python 进行序列图的快速分割与可视化。通过一个实际案例,详细展示了从需求分析到代码实现的全过程。具体包括如何读取序列图数据、应用分割算法以及利用可视化库生成直观的图表,帮助非编程背景的用户也能轻松上手。 ... [详细]
  • PHP中元素的计量单位是什么? ... [详细]
  • 如何将PHP文件上传至服务器及正确配置服务器地址 ... [详细]
  • adbshell模拟发送安卓广播的入门知识和实例讲解:入门 ... [详细]
  • 一、HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单。<!DOCTYPEhtml><html><head> ... [详细]
  • 在C#编程中,数值结果的格式化展示是提高代码可读性和用户体验的重要手段。本文探讨了多种格式化方法和技巧,如使用格式说明符、自定义格式字符串等,以实现对数值结果的精确控制。通过实例演示,展示了如何灵活运用这些技术来满足不同的展示需求。 ... [详细]
  • 本文将详细介绍如何在SSM框架中无缝集成ShardingSphere 4.10,以实现高效的数据分片和读写分离。通过实例演示和代码解析,帮助开发者快速掌握这一复杂但实用的技术。文章从基础概念入手,逐步深入到具体配置和应用实践,旨在为读者提供一个全面、易懂的整合指南。 ... [详细]
author-avatar
暴躁的玩具
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有