2014-01-26 54 views
3

我遇到了实施FullCalendar的问题... 我想,我做了所有关于“基本用法”主题的说明http://arshaw.com/fullcalendar/docs/usage/ 为什么这段代码没有出现我的callendar在我的.html?完整的日历问题实施

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title> 
     Callendar Test 
    </title> 
    <link rel='stylesheet' type='text/css' href='fullcalendar.css' /> 

    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript" src='fullcalendar.js'></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      // page is now ready, initialize the calendar... 

      $('#calendar').fullCalendar({ 
       // put your options and callbacks here 


      }) 

     }); 
    </script> 
</head> 
<body> 
    <div id='calendar'></div> 


</body> 
</html> 

任何解决方案?

P.S .:我下载了Jquery文件(版本1.x)并放在与我的HTML页面相同的文件中。

错误:

Unknown property 'zoom'. Declaration dropped. fullcalendar.css:107 
18:50:38.058 Expected 'none' or URL but found 'alpha('. Error in parsing value for    'filter'. Declaration dropped. fullcalendar.css:133 
18:50:38.058 Error in parsing value for 'background-image'. Declaration dropped. fullcalendar.css:213 
18:50:38.058 Error in parsing value for 'background-image'. Declaration dropped. fullcalendar.css:214 
18:50:38.058 Error in parsing value for 'background-image'. Declaration dropped. fullcalendar.css:215 
18:50:38.058 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. fullcalendar.css:255 
18:50:38.058 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. fullcalendar.css:414 
18:50:38.059 Expected declaration but found '*'. Skipped to next declaration. fullcalendar.css:532 
18:50:38.059 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. fullcalendar.css:575 
18:50:38.059 Error in parsing value for 'display'. Declaration dropped. fullcalendar.css:580 
18:50:38.092 ReferenceError: moment is not defined fullcalendar.js:12 
18:50:38.094 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. FullCalendar.html 
18:50:38.116 TypeError: $(...).fullCalendar is not a function 

这是我的目录:

enter image description here

+0

打开浏览器控制台查看得到的是什么错误 – Satpal

+0

我在这里看不到任何错误...?您将jQuery文件重命名为'jquery.js',并且您的'calendar.js'和您的'html页面'都位于同一个本地区域?你可能只是在你的文件名中有一个拼写错误,就像在你的'title' ** Callendar **中一样。它是'fullcalendar.js'。 –

+0

我没有重新命名我的callendar – Damiii

回答

2

18:50:38.092的ReferenceError:未定义时刻fullcalendar.js:12

18:50:38.116类型错误:$(...) .fullCalendar不是一个函数。

在你的calendar.js,看起来你没有一个函数,它有一个event handler可以用jQuery来定位specific id

编辑:

不知道你做错了什么,但我把一切都工作得很好,就像你有它设置。

正如你所看到的,这是我的所有代码:

<!DOCTYPE html> 
<html> 
<head> 
<link href='fullcalendar.css' rel='stylesheet' /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src='fullcalendar.min.js'></script> 
<script> 

    $(document).ready(function() { 

     $('#calendar').fullCalendar({ 
     }); 

    }); 

</script> 
</head> 
<body> 
<div id='calendar'></div> 
</body> 
</html> 

这里是我的整个目录:

enter image description here

这里是一个完整的工作文件库,工作得很好。

http://www.sinsysonline.com/calendar/test/full_package.zip

+0

甚至设置它,它不工作。 – Damiii

+0

使用您的代码在我的网站上正常工作。随意查看来源。 –

+0

我看到了你的代码,你有更多的链接是正常的? – Damiii

0

我认为js文件不存在,在您尝试从访问它的位置。

请将源元素的href属性更新为您的JS文件所在的源位置!

如需解决方案,请打开控制台并查找错误。这将是404!这意味着没有找到文件。

对于铬按CTRL + SHIFT + J

+0

处于同一水平,你的意思是我的日历? – Damiii

+0

是的,你的日历源不会被加载到DOM中!尝试重新检查文件是否已加载。 –

+0

两者都存在于同一个文件中! FullCalendar - > fullcalendar.css FullCalendar - > FullCalendar.html FullCalendar - > jquery.js – Damiii

24

万一别人通过谷歌发现这个线程,并有同样的问题:如果您使用的是主办了FullCalendar库 ,你必须包含的时刻。js(在托管库上不可用,看起来,因此您必须下载它)之前您包含fullcalendar.js文件。例如:

<script type="text/javascript" src="scripts/moment.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.1/fullcalendar.min.js"></script> 

FullCalendar在实例化之前显然有一些对Moment对象的引用。

希望能帮助别人。

+0

好的! :) 谢谢 !不记得有关(我必须说):) – Damiii

+2

这也是在cdnjs下:https://cdnjs.com/libraries/moment.js/ – spyke01

+0

真棒谢谢! – user942620

1

确保首先包含MomentJS,因为fullcalendar.js要求这样做。

这是我的错误,我收到了同样的错误。

<script src="/includes/js/fullcalendar-2.0.1/lib/moment.min.js"></script> 
<script src="/includes/js/fullcalendar-2.0.1/fullcalendar.min.js"></script> 
5

您必须检查js的顺序。

moment.min.js 
fullcalendar.js 
lang-all.js 
+0

谢谢Jaun,帮助我解决问题,因为我得到了一个未定义的时刻 –