Difference between revisions of "Team:Georgia State/notebook"

Line 1: Line 1:
 
{{Georgia_State/sand}}
 
{{Georgia_State/sand}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
<!DOCTYPE html>
 
 
<head>
 
<head>
−
<meta charset='utf-8' />
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<link href='../fullcalendar.min.css' rel='stylesheet' />
+
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
−
<script src='../lib/moment.min.js'></script>
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
<script src='../lib/jquery.min.js'></script>
+
−
<script src='../fullcalendar.min.js'></script>
+
−
<script>
+
−
 
+
−
  $(document).ready(function() {
+
−
 
+
−
    $('#calendar').fullCalendar({
+
−
      header: {
+
−
        left: 'prev,next today',
+
−
        center: 'title',
+
−
        right: 'month,agendaWeek,agendaDay,listWeek'
+
−
      },
+
−
      defaultDate: '2018-03-12',
+
−
      navLinks: true, // can click day/week names to navigate views
+
−
      editable: true,
+
−
      eventLimit: true, // allow "more" link when too many events
+
−
      events: [
+
−
        {
+
−
          title: 'All Day Event',
+
−
          start: '2018-03-01',
+
−
        },
+
−
        {
+
−
          title: 'Long Event',
+
−
          start: '2018-03-07',
+
−
          end: '2018-03-10'
+
−
        },
+
−
        {
+
−
          id: 999,
+
−
          title: 'Repeating Event',
+
−
          start: '2018-03-09T16:00:00'
+
−
        },
+
−
        {
+
−
          id: 999,
+
−
          title: 'Repeating Event',
+
−
          start: '2018-03-16T16:00:00'
+
−
        },
+
−
        {
+
−
          title: 'Conference',
+
−
          start: '2018-03-11',
+
−
          end: '2018-03-13'
+
−
        },
+
−
        {
+
−
          title: 'Meeting',
+
−
          start: '2018-03-12T10:30:00',
+
−
          end: '2018-03-12T12:30:00'
+
−
        },
+
−
        {
+
−
          title: 'Lunch',
+
−
          start: '2018-03-12T12:00:00'
+
−
        },
+
−
        {
+
−
          title: 'Meeting',
+
−
          start: '2018-03-12T14:30:00'
+
−
        },
+
−
        {
+
−
          title: 'Happy Hour',
+
−
          start: '2018-03-12T17:30:00'
+
−
        },
+
−
        {
+
−
          title: 'Dinner',
+
−
          start: '2018-03-12T20:00:00'
+
−
        },
+
−
        {
+
−
          title: 'Birthday Party',
+
−
          start: '2018-03-13T07:00:00'
+
−
        },
+
−
        {
+
−
          title: 'Click for Google',
+
−
          url: 'http://google.com/',
+
−
          start: '2018-03-28'
+
−
        }
+
−
      ]
+
−
    });
+
−
 
+
−
  });
+
−
 
+
−
</script>
+
−
<style>
+
−
 
+
−
  body {
+
−
    margin: 40px 10px;
+
−
    padding: 0;
+
−
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+
−
    font-size: 14px;
+
−
  }
+
−
 
+
−
  #calendar {
+
−
    max-width: 900px;
+
−
    margin: 0 auto;
+
−
  }
+
−
 
+
−
</style>
+
 
</head>
 
</head>
 
<body>
 
<body>
  
−
   <div id='calendar'>This is a calendar</div>
+
<div class="container">
−
 
+
  <h2>Accordion Example</h2>
 +
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
 +
   <div class="panel-group" id="accordion">
 +
    <div class="panel panel-default">
 +
      <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
 +
        </h4>
 +
      </div>
 +
      <div id="collapse1" class="panel-collapse collapse in">
 +
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 +
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
 +
      </div>
 +
    </div>
 +
    <div class="panel panel-default">
 +
      <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
 +
        </h4>
 +
      </div>
 +
      <div id="collapse2" class="panel-collapse collapse">
 +
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 +
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
 +
      </div>
 +
    </div>
 +
    <div class="panel panel-default">
 +
      <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
 +
        </h4>
 +
      </div>
 +
      <div id="collapse3" class="panel-collapse collapse">
 +
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 +
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
   
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:14, 1 August 2018

<!DOCTYPE html>

Accordion Example

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Collapsible Group 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.