Pb with calendar

1

Hi,

I just want to use the component calendar. So, I write my input in my html file :

<input type="text" placeholder="Mine" readonly="readonly" id="calendar-date-mine">

And I write the initialization in my js file :

var calendar = myApp.calendar.create({
  inputEl : '#calendar-date-mine',
  on: {
	opened: function () {
	  console.log('Calendar opened')
	}
  }
});

But, when i’m clicking on the input, it’s showing a div with nothing in the bottom of my page which the calendar has to appear…

Someone can help me ? I’m looking for an soluce in the same time.

Thanks in advance.

2

hi,
the portion of code you share it should work, can you share the full code.

3

Sure,

My calendar component is in a list like this :

<div class="list">
	<ul>
	     <li>
		<div class="item-content">
		 <div class="item-media"><i class="fa fa-calendar-o " style="font-size:25px"></i></div>
		    <div class="item-inner">
		        <div class="item-input">
		            <input type="text" placeholder="Mine" readonly="readonly" id="calendar-date-mine" >
		        </div>
		      </div>
		  </div>
	    </li>
	     <li>
		<div class="item-content">
		<div class="item-media"><i class="fa fa-calendar-o " style="font-size:25px"></i></div>
		   <div class="item-inner">
		       <div class="item-input">
		           <input type="text" placeholder="Tachy" readonly="readonly" id="calendar-date-tachy">
		       </div>
		    </div>
		</div>
           </li>
       </ul>
  </div>

And in my js file, the initialization is do onPageInit :

 function newReceptInit(){
	
	//add calendars
	
	var calendar = myApp.calendar.create({
	  inputEl : '#calendar-date-mine',
	  on: {
		opened: function () {
		  console.log('Calendar opened')
		}
	  }
	});
}

which is called here :

function init() {

  mainView = myApp.views.create('.view-main', {
  routes: [
	{
		path: '/home/',
		template: $$('script#home').text(),
	},
	{
		path: '/profile/',
		template: $$('script#profile').text(),
	},
	{
		path: '/settings/',
		template: $$('script#settings').text(),
	},
	{
		path: '/newRecept/',
		template: $$('script#newRecept').text(),
		on: {

			pageInit: function (event, page) {
			  newReceptInit();
			}
		}
	},
	{
		path: '/viewRecept/',
		template: $$('script#viewRecept').text(),
	},
  ],
});
}

Thanks in advance if you notice anything !

4

And what is F7 version you use? I see the HTML content is kind of mix of v1 and v2? This JS will work in v2 only.

when i’m clicking on the input, it’s showing a div with nothing in the bottom of my page which the calendar has to appear…

Can you show a screenshot?