How to display the calendar view inside my content section [Answered]RSS

• • Reply
  polachan

  Member

  147 Points

  664 Posts

  How to display the calendar view inside my content section

  Oct 19, 2017 09:48 PM|polachan|LINK

  How to bring the full calendar view inside my content. The fullcalendar html code is given below. Where I can give the code

  <section class="content">
      <div class="row">

     // Here the full calendar should be displayed. Please help. I have given my code for full calendar below

   </div>

  </section>

  @{
      ViewBag.Title = "FullCalendar";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  <h2>FullCalendar</h2>
  <div id="calendar"></div>
  
    
  <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
  @section Scripts{
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
      <script>
          $(document).ready(function () {
           
              var events = [];
              $.ajax({
                  type: "GET",
                  url: "/FullCalendar/GetEvents",
                  success: function (data) {
                      $.each(data, function (i, v) {
                          
                          events.push({
                              title: v.Subject,
                              description: v.Description,
                              start: moment(v.StartTime),
                              end: v.End != null ? moment(v.EndTime) : null,
                              color: v.ThemeColor,
                              allDay: v.IsFullDay
                          });
  
                      })
                      GenerateCalender(events);
                  },
                  error: function (error) {
                      alert('failed');
                  }
              })
              function GenerateCalender(events) {
           
                  $('#calendar').fullCalendar('destroy');
                  $('#calendar').fullCalendar({
                      contentHeight: 300,
                      defaultDate: new Date(),
                      timeFormat: 'h(:mm)a',
                      header: {
                          left: 'prev,next today',
                          center: 'title',
                          left: 'month,basicWeek,basicDay'
                      },
                      eventLimit: true,
                      eventColor: '#378006',
                      events: events,
                  })
              }
  
              
  
          });
      </script>
  
      
   } 

• • Reply
  X.Daisy

  Contributor

  2370 Points

  735 Posts

  Re: How to display the calendar view inside my content section

  Oct 20, 2017 02:32 AM|X.Daisy|LINK

  Hi polachan,

  Do you mean that you want to show the calendar inside the section, the class of which is content? I think you just need to move the calendar div to this section. For example:

  <section class="content">
      <div class="row">
          <h2>FullCalendar</h2>
          <div id="calendar"></div>
      </div>
  </section>

  Any confusion, please free feel to post here.

  Best Regards,

  Daisy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.