CODEWITHSUNDEEP
javascriptjquerynode.jscalendarsemantic-ui
NGrant
NGrant

Reputation: 1

Semantic UI Calendar not showing

I'm trying experiment with Semantic UI Calendar where you have a date input field and a calendar pops up when you select it as shown in this first example. I'm unfamiliar with this process so I'm unsure if I'm properly linking the .js file or if it's something else. I've looked at other problems and saw mention of jquery, but again unsure about how to even check if that's the problem.

TOOLS: Webstorm, Node.js

PROCESS:

1: npm install --save semantic-ui-calendar (install instructions ref)

2: Added the below code and tried to link them together

3: npm start (running on local host)

4: Page loads, input field and everything else wdisplays, calendar failing to show

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="/node_modules/semantic-ui-calendar/dist/calendar.min.js"></script>
    <link rel="stylesheet" href="/node_modules/semantic-ui-calendar/dist/calendar.min.css" />
    <script src="/utils/calendar.js"></script>
  </head>
  <body>

  <div>
    <div class="ui calendar" id="example1">
      <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
      </div>
    </div>
  </div>
  </body>
</html>

Javascript file:

$('#example1').calendar();
$('#example2').calendar({
  type: 'date'
});
$('#example3').calendar({
  type: 'time'
});
$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart')
});
$('#example4').calendar({
  startMode: 'year'
});
$('#example5').calendar();
$('#example6').calendar({
  ampm: false,
  type: 'time'
});
$('#example7').calendar({
  type: 'month'
});
$('#example8').calendar({
  type: 'year'
});
$('#example9').calendar();
$('#example10').calendar({
  on: 'hover'
});
var today = new Date();
$('#example11').calendar({
  minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5),
  maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)
});
$('#example12').calendar({
  monthFirst: false
});
$('#example13').calendar({
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year = date.getFullYear();
      return day + '/' + month + '/' + year;
    }
  }
});
$('#example14').calendar({
  inline: true
});
$('#example15').calendar();

Upvotes: 0

Views: 2823

Answers (2)

Amrit
Amrit

Reputation: 11

It will not work because Semantic UI v2.3.3 does not provide a calendar function. You can check in the inspect section; it will throw an error. If you want to use calendar you need to downgrade your semantic.js file to v2.1.4.

Upvotes: 1

SD3L
SD3L

Reputation: 171

I think it doesn't works because you forget to import Jquery plugin, you can do it with a cdn : 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

And your javascript files is not good if you use Jquery, you have to start the files by :

$(document).ready(function() {
        /* YOUR JAVASCRIPT CODE INSIDE  */
 });

Peace

Upvotes: 3

Related Questions