2016-03-06 3 views
0

Я хочу использовать загрузочный календарь планировщик, но календарь не отображается как на http://www.codeply.com/go/bp/rzNQTlDlFXкалендарь Bootstrap не отображается

Я не знаю, где я и ошибаюсь ..

Кроме того, я не очень хорошо с передним концом и бутстрапом ..

Таким образом, любая помощь приветствуется ..

спасибо ..

Вот HTML ..

<html> 
<head> 

    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 

    <title>DPTS-advisor</title><!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <!-- Custom CSS --> 
    <link href="css/student.css" rel="stylesheet" type="text/css" /> 
    <link href="css/arrange-meetings.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
    crossorigin="anonymous" type="text/javascript"> 
</script> 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href= 
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity= 
    "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin= 
    "anonymous" type="text/css" /> 
    <script type="text/javascript"> 
//<![CDATA[ 
    $.getScript('http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js',function(){ 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 
    events: [ 
     { 
     title: 'All Day Event', 
     start: new Date(y, m, 1) 
     }, 
     { 
     title: 'Long Event', 
     start: new Date(y, m, d-5), 
     end: new Date(y, m, d-2) 
     }, 
     { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d-3, 16, 0), 
     allDay: false 
     }, 
     { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d+4, 16, 0), 
     allDay: false 
     }, 
     { 
     title: 'Meeting', 
     start: new Date(y, m, d, 10, 30), 
     allDay: false 
     }, 
     { 
     title: 'Lunch', 
     start: new Date(y, m, d, 12, 0), 
     end: new Date(y, m, d, 14, 0), 
     allDay: false 
     }, 
     { 
     title: 'Birthday Party', 
     start: new Date(y, m, d+1, 19, 0), 
     end: new Date(y, m, d+1, 22, 30), 
     allDay: false 
     }, 
     { 
     title: 'Click for Google', 
     start: new Date(y, m, 28), 
     end: new Date(y, m, 29), 
     url: 'http://google.com/' 
     } 
    ] 
    }); 
    }) 
    //]]> 
    </script> 
</head> 

<body> 
    <div id="wrapper"> 
    <!-- Sidebar --> 

    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
     <li class="sidebar-brand"><a href="student.html">DPTS</a></li> 

     <li>Dogus Project Tracking System</li> 

     <li><a href="choose.html">Select Project</a></li> 

     <li><a href="arrange-meetings.html">Arrange Meetings</a></li> 

     <li><a href="#">Overview</a></li> 

     <li><a href="#">Events</a></li> 

     <li><a href="#">About</a></li> 

     <li><a href="#">Services</a></li> 

     <li><a href="create-gant.html">Create Gant Chart</a></li> 
     </ul> 
    </div><!-- /#sidebar-wrapper --> 
    <!-- Page Content --> 

    <div class="container"> 
     <hr /> 

     <div id="calendar"></div> 
    </div><!-- /#page-content-wrapper --> 
    </div><!-- /#wrapper --> 
    <!-- jQuery --> 
</body> 
</html> 

ответ

1

Попробуйте связать библиотеку JQuery, прежде чем использовать календарь библиотеку, потому что вы используете "$" в коде:

<html> 
<head> 

    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 

    <title>DPTS-advisor</title><!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <!-- Custom CSS --> 
    <link href="css/student.css" rel="stylesheet" type="text/css" /> 
    <link href="css/arrange-meetings.css" rel="stylesheet" type="text/css" /> 

    <!-- Link jQuery Library --> 
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
    crossorigin="anonymous" type="text/javascript"> 
</script> 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href= 
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity= 
    "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin= 
    "anonymous" type="text/css" /> 
    <script type="text/javascript"> 
//<![CDATA[ 
    $.getScript('http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js',function(){ 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 
    events: [ 
     { 
     title: 'All Day Event', 
     start: new Date(y, m, 1) 
     }, 
     { 
     title: 'Long Event', 
     start: new Date(y, m, d-5), 
     end: new Date(y, m, d-2) 
     }, 
     { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d-3, 16, 0), 
     allDay: false 
     }, 
     { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d+4, 16, 0), 
     allDay: false 
     }, 
     { 
     title: 'Meeting', 
     start: new Date(y, m, d, 10, 30), 
     allDay: false 
     }, 
     { 
     title: 'Lunch', 
     start: new Date(y, m, d, 12, 0), 
     end: new Date(y, m, d, 14, 0), 
     allDay: false 
     }, 
     { 
     title: 'Birthday Party', 
     start: new Date(y, m, d+1, 19, 0), 
     end: new Date(y, m, d+1, 22, 30), 
     allDay: false 
     }, 
     { 
     title: 'Click for Google', 
     start: new Date(y, m, 28), 
     end: new Date(y, m, 29), 
     url: 'http://google.com/' 
     } 
    ] 
    }); 
    }) 
    //]]> 
    </script> 
</head> 

<body> 
    <div id="wrapper"> 
    <!-- Sidebar --> 

    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
     <li class="sidebar-brand"><a href="student.html">DPTS</a></li> 

     <li>Dogus Project Tracking System</li> 

     <li><a href="choose.html">Select Project</a></li> 

     <li><a href="arrange-meetings.html">Arrange Meetings</a></li> 

     <li><a href="#">Overview</a></li> 

     <li><a href="#">Events</a></li> 

     <li><a href="#">About</a></li> 

     <li><a href="#">Services</a></li> 

     <li><a href="create-gant.html">Create Gant Chart</a></li> 
     </ul> 
    </div><!-- /#sidebar-wrapper --> 
    <!-- Page Content --> 

    <div class="container"> 
     <hr /> 

     <div id="calendar"></div> 
    </div><!-- /#page-content-wrapper --> 
    </div><!-- /#wrapper --> 
    <!-- jQuery --> 
</body> 
</html> 
Смежные вопросы