Question

我想使用引导日程安排程序，但日历不会显示在http://www.codeply.com/go/bp/rzNQTlDlFX

上

我不知道我哪里错了..

此外，我对前端和引导程序并不是很好..

所以任何帮助都赞赏..

谢谢..

这是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>

Answer 1

尝试在使用日历库之前链接 jQuery 库，因为您使用＆＃34; $＆＃34;在代码中：

<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>

未显示引导程序日历

1 个答案: