Semantic UI Calendar Usage

help
1

I want to use semantic ui calendar package in my meteor app
Github Link

I did
meteor npm install --save semantic-ui-calendar

and added following to my template

HTML

<h3>Input</h3>
            <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>
            <br/>

JS

Template.formwizard_1_1.onRendered(function(){
    $('#example1').calendar();
});

But I get below error

TypeError: $(…).calendar is not a function
at Blaze.TemplateInstance. (FormWizard_2.js:13)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:465)
at fireCallbacks (template.js:115)
at Blaze.View. (template.js:208)
at view.js:107
at Object.Blaze._withCurrentView (view.js:538)
at view.js:106
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)

Please advise.

2

Try using a defer.

Meteor.defer(() => $('#example1').calendar())

Semantic-UI is highly asynchronous and doesn’t always initialize things when you think it does.

1 Like
3

and make sure you don;t have an if, unless etc. blaze statement around your semantic stuff. if you do… you need to put the calendar in its own template

if
{{> showCalender }}

and if defer does not work, you can use setTimeOut(func(), 800)

4

Hi,

I got the exact same problem and I tried Defer and SetTimeout both solution doesn’t help the issue. The same error still appear. Any idea? Please help, thanks.

5

Did you already use a subtemplate? And initialize it in the onRendered function.

6 
<template name="formwizard_2">
    <div class="ui centered grid">
        <div class="four column centered row">
            <h3 class="ui header">Enter  details</h3>
            <div class="ui text container">
                <div class="ui raised padded segment">
                    <div class="ui two column grid">
                        <div class="twelve wide column">
                            <div class="ui left aligned basic segment">
                                <div class="ui form">
                                    <div class="fields">
                                        <div class="field">
                                            <label> End Date</label>
                                            <div class="ui calendar" id="contestEndDateCal">
                                                <div class="ui input left icon">
                                                    <i class="calendar icon"></i>
                                                    <input type="text" placeholder="Date/Time">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


Template.formwizard_2.onRendered(function(){

    var today = new Date();
    $('#contestEndDateCal').calendar({
        minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3),
        maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30)
    });

// Ignore below dropdown code.
    this.$(".dropdown").dropdown();
});```
7

I tried sub-template after you mentioned it but the result is the same. I’m now trying the example code by @asteroidal.

8

Thanks, will try this now.

9

Hi @asteroidal,

I use your template exactly without changing any code (as subtemplate), I still get the same error. No different.

14%20PM
14%20PM741×202 3.25 KB

This is what I get from your template, click the field has no popup calendar.

Developer tool still show “$(…).calendar is not a function”.

Any idea what else is wrong? Do I need to do import the calendar module?

10

I checked my code and I think I had added the calendar.js and css file to ‘both’ or client dir. You can try that.

14%20PM%20%20%20Rectangle%201%20%20%20Rectangle%202

11

Hi @asteroidal,

Thanks for the info. Does your project able to get the calendar working?

I follow your advice put .js and .css to my client folder and add the following to my HTML head:

<script type="text/javascript" src="calendar.js"></script>
<link rel="stylesheet" href="calendar.css" />

I still get the same error. I gave up on this. Wasted too much time and the developer is not active on this module anymore. No respond for question, so that’s it. Thanks for all the help. Appreciate.

12

Hi.

I just got it to work without issue:

  1. install npm package
meteor npm install semantic-ui-calendar --save
  1. import from npm folder into your main.js or subpage (as long as it is a client js file where you have your Templates (you will have to adjust your relative path)
import '../../../node_modules/semantic-ui-calendar/dist/calendar';
import '../../../node_modules/semantic-ui-calendar/dist/calendar.css';
  1. Put your html in your template
            <div class="field">
              <div class="ui calendar" id="example2">
                <div class="ui input left icon">
                  <i class="calendar icon"></i>
                  <input type="text" placeholder="Date">
                </div>
              </div>
            </div>

and your onRendered template function for the same template

  this.$('#example2').calendar({ type: 'date' });

Now you should be able to click on the input box and it will pop up.

1 Like
13

Faced same issue in my new project.

But got it working by calling this.$(’#example2’).calendar({ type: ‘date’ });
after the modal show call.

I guess it $(’#example2’).calendar doesnt work if your template is not visible.