locked
How to get JQuery FullCalendar and JQuery Tabs to work together RRS feed

  • Question

  • User-718146471 posted

    Hey folks, I'm trying to get the JQuery Tabs part of JQuery-UI to work in concert with the FullCalendar. The tabs render just fine with content panes providing it is standard text. When I try bringing the calendar jquery into it, I get the tabs presented fine but nothing appears in the content space. I fear I might be missing some small little thing. I'm including my code; maybe the problem will appear to someone here pretty quickly. Thanks all!!

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel='stylesheet' href='../scripts/fullcalendar.min.css' />
        <script type="text/javascript" src='../scripts/lib/jquery.min.js'></script>
        <script type="text/javascript" src='../scripts/lib/moment.min.js'></script>
        <script type="text/javascript" src='../scripts/fullcalendar.js'></script>
        <script type="text/javascript" src='../scripts/theme-chooser.js'></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    
    <script>
    
        $(document).ready(function () {
    
            initThemeChooser({
    
                init: function (themeSystem) {
                    $('#calendar_1').fullCalendar({
                        themeSystem: themeSystem,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listMonth'
                        },
                        defaultDate: '2018-03-12',
                        weekNumbers: true,
                        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'
                            }
                        ]
                    });
                    $('#calendar_2').fullCalendar({
                        themeSystem: themeSystem,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listMonth'
                        },
                        defaultDate: '2018-03-12',
                        weekNumbers: true,
                        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'
                            }
                        ]
                    });
                    $('#calendar_3').fullCalendar({
                        themeSystem: themeSystem,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listMonth'
                        },
                        defaultDate: '2018-03-12',
                        weekNumbers: true,
                        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'
                            }
                        ]
                    });
                },
    
                change: function (themeSystem) {
                    $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
                }
    
            });
    
        });
    
    </script>
    <style>
    
      body {
        margin: 0;
        padding: 0;
        font-size: 14px;
      }
    
      #top,
      #calendar.fc-unthemed {
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
      }
    
      #top {
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
        color: #000;
      }
    
      #top .selector {
        display: inline-block;
        margin-right: 10px;
      }
    
      #top select {
        font: inherit; /* mock what Boostrap does, don't compete  */
      }
    
      .left { float: left }
      .right { float: right }
      .clear { clear: both }
    
      #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
      }
    
    </style>
          <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script type="text/javascript">
          $(function () {
              $("#tabs").tabs();
          });
      </script>
    </head>
    <body><form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <div id='top'>
        <div class='left'>
          <div id='theme-system-selector' class='selector'>
            Theme System:
            <select>
              <option value='bootstrap4'>Bootstrap 4</option>
              <option value='bootstrap3'>Bootstrap 3</option>
              <option value='jquery-ui' selected>jQuery UI</option>
              <option value='standard'>unthemed</option>
            </select>
          </div>
          <div data-theme-system="bootstrap3" class='selector' style='display:none'>
            Theme Name:
            <select>
              <option value='' selected>Default</option>
              <option value='cosmo'>Cosmo</option>
              <option value='cyborg'>Cyborg</option>
              <option value='darkly'>Darkly</option>
              <option value='flatly'>Flatly</option>
              <option value='journal'>Journal</option>
              <option value='lumen'>Lumen</option>
              <option value='paper'>Paper</option>
              <option value='readable'>Readable</option>
              <option value='sandstone'>Sandstone</option>
              <option value='simplex'>Simplex</option>
              <option value='slate'>Slate</option>
              <option value='solar'>Solar</option>
              <option value='spacelab'>Spacelab</option>
              <option value='superhero'>Superhero</option>
              <option value='united'>United</option>
              <option value='yeti'>Yeti</option>
            </select>
          </div>
    
          <div data-theme-system="bootstrap4" class='selector' style='display:none'>
            Theme Name:
    
            <select>
              <option value='' selected>Default</option>
              <option value='cerulean'>Cerulean</option>
              <option value='cosmo'>Cosmo</option>
              <option value='cyborg'>Cyborg</option>
              <option value='darkly'>Darkly</option>
              <option value='flatly'>Flatly</option>
              <option value='journal'>Journal</option>
              <option value='litera'>Litera</option>
              <option value='lumen'>Lumen</option>
              <option value='lux'>Lux</option>
              <option value='materia'>Materia</option>
              <option value='minty'>Minty</option>
              <option value='pulse'>Pulse</option>
              <option value='sandstone'>Sandstone</option>
              <option value='simplex'>Simplex</option>
              <option value='sketchy'>Sketchy</option>
              <option value='slate'>Slate</option>
              <option value='solar'>Solar</option>
              <option value='spacelab'>Spacelab</option>
              <option value='superhero'>Superhero</option>
              <option value='united'>United</option>
              <option value='yeti'>Yeti</option>
            </select>
          </div>
    
          <div data-theme-system="jquery-ui" class='selector' style='display:none'>
            Theme Name:
    
            <select>
              <option value='black-tie'>Black Tie</option>
              <option value='blitzer'>Blitzer</option>
              <option value='cupertino' selected>Cupertino</option>
              <option value='dark-hive'>Dark Hive</option>
              <option value='dot-luv'>Dot Luv</option>
              <option value='eggplant'>Eggplant</option>
              <option value='excite-bike'>Excite Bike</option>
              <option value='flick'>Flick</option>
              <option value='hot-sneaks'>Hot Sneaks</option>
              <option value='humanity'>Humanity</option>
              <option value='le-frog'>Le Frog</option>
              <option value='mint-choc'>Mint Choc</option>
              <option value='overcast'>Overcast</option>
              <option value='pepper-grinder'>Pepper Grinder</option>
              <option value='redmond'>Redmond</option>
              <option value='smoothness'>Smoothness</option>
              <option value='south-street'>South Street</option>
              <option value='start'>Start</option>
              <option value='sunny'>Sunny</option>
              <option value='swanky-purse'>Swanky Purse</option>
              <option value='trontastic'>Trontastic</option>
              <option value='ui-darkness'>UI Darkness</option>
              <option value='ui-lightness'>UI Lightness</option>
              <option value='vader'>Vader</option>
            </select>
          </div>
    
          <span id='loading' style='display:none'>loading theme...</span>
    
        </div>
    
        <div class='right'>
          <span class='credits' data-credit-id='bootstrap-standard' style='display:none'>
            <a href='https://getbootstrap.com/docs/3.3/' target='_blank'>Theme by Bootstrap</a>
          </span>
          <span class='credits' data-credit-id='bootstrap-custom' style='display:none'>
            <a href='https://bootswatch.com/' target='_blank'>Theme by Bootswatch</a>
          </span>
          <span class='credits' data-credit-id='jquery-ui' style='display:none'>
            <a href='http://jqueryui.com/themeroller/' target='_blank'>Theme by jQuery UI</a>
          </span>
        </div>
    
        <div class='clear'></div>
      </div>
    <div id="tabs">
        <ul>
            <li>
                <a href="tab1">Dept 1</a>
            </li>
            <li>
                <a href="tab2">Dept 2</a>
            </li>
            <li>
                <a href="tab3">Dept 3</a>
            </li>
        </ul>
        <div id="tab1">
            <div id='calendar_1'></div>
        </div>
        <div id="tab2">
            <div id='calendar_2'></div>
        </div>
        <div id="tab3">
            <div id='calendar_3'></div>
        </div>
    </div>
    </form>
    </body>
    </html>

    Tuesday, May 29, 2018 5:31 PM

Answers

  • User36583972 posted


    Hi bbcompent1,

    Yes, I can find the theme-chooser.js file. But, when I run the project. I have some error with the other js file. When the code is inconsistent with the version of the JS file, they will cause conflicts.

    Could you upload your demo that we can download it and debugging. This will help us quickly analyze your problem.

    Thank you for your understanding.


    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 1, 2018 6:49 AM

All replies

  • User36583972 posted

    Hi bbcompent1,

       <script type="text/javascript" src='../scripts/theme-chooser.js'></script>

    Could you tell us where the theme-chooser.js file we can download or Reference it to the project? I try to reproduce your project, but I have some errors on the Reference of js file.


    Best Regards,

    Yong Lu

    Thursday, May 31, 2018 1:33 AM
  • User-718146471 posted

    Sure, here is the demo on fullcalendar.io that I got it from: https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/themes.html

    Thursday, May 31, 2018 4:48 PM
  • User36583972 posted


    Hi bbcompent1,

    Yes, I can find the theme-chooser.js file. But, when I run the project. I have some error with the other js file. When the code is inconsistent with the version of the JS file, they will cause conflicts.

    Could you upload your demo that we can download it and debugging. This will help us quickly analyze your problem.

    Thank you for your understanding.


    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 1, 2018 6:49 AM