i am trying to use the calendar component but always get the following error:
framework7.bundle.min.js:13 Uncaught TypeError: Cannot read property ‘backdrop’ of undefined
at t.open (framework7.bundle.min.js:13)
at HTMLInputElement.y (framework7.bundle.min.js:13)
at HTMLInputElement.l (framework7.bundle.min.js:13)
t.open @ framework7.bundle.min.js:13
y @ framework7.bundle.min.js:13
l @ framework7.bundle.min.js:13
i am using custom build of framework seven that i updated via git 4 days ago. Before i got an error on calendar.create() because it wasnt in my custom build.
here is an examlpe page:
<template>
<div class="page" data-name="prodLink">
<div class="page-content">
<div class="tabs tabs-sub">
<div class="sub-nav editBlock">
<a href="#" tabindex="" class="tab-link" data-tab=".tab1" @click="new">{{lng 'new'}}</a>
<a href="#" tabindex="" class="tab-link" data-tab=".tab2" @click="getArchiv">{{lng 'archiv'}}</a>
</div>
<div class="tab tab2">
todo....
</div>
<div class="tab tab-active tab1">
<div class="row">
<div class="list col-50">
<ul id="msgForm">
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title">{{lng 'addRecipient'}}</div>
<div class="item-input-wrap">
<input id="search" tabindex="1" type="text" class="field" placeholder="{{lng 'userOrArticle'}}">
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title">{{lng 'txt'}}</div>
<div class="item-input-wrap">
<textarea id="appointmentTxt" tabindex="2" class="field" placeholder="{{lng 'shortTxt'}}">{doc.txt}</textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title">{{lng 'date'}}</div>
<div class="item-input-wrap">
<input type="text" placeholder="Select date" tabindex="6" readonly="readonly" id="needAnswerDate"/>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner btnBucket-vertical">
<button @click="save" accesskey="s" tabindex="14" class="btn-submit col button button-raised button-fill flex-shrink-3 activeSave disabled" disabled>{{lng 'save'}}</button>
<button @click="cancel" accesskey="r" tabindex="15" class="col button button-raised button-fill flex-shrink-3">{{lng 'cancel'}}</button>
</div>
</div>
</li>
</ul>
</div>
<div class="list col-50">
<div class="item-title">{{lng 'recipient'}}</div>
{{#if recipients}}
{{#each recipients}}
{{label}} <a href="#" @click="rmRecipient({{@index}})" class="remove" title="{{lng 'remove' }}"><i class="f7-icons">xmark</i></a><br>
{{/each}}
{{else}}
{{lng 'noRecipients'}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// Component Methods
methods: {
getArchiv: function () {
//make availible in then
var self = this;
self.$app.mod.notification.getArchiv()
.then(rs => {
//set isExt for template
rs.rows.forEach(function (r) {
//add user details
r.doc = self.$app.mod.user.decorateUser(r.doc);
});
//assign data
self.$setState({ listArchiv: rs.rows});
})
.catch(self.$app.methods.catchDb);
},
reply: function (i) {
var self = this;
self.list[i].doc.replyTxt = true;
self.$setState({ list: self.list });
},
replySave: function (i) {
var self = this;
self.$app.mod.notification.reply(self.list[i].doc, self.$('#txt' + i).val())
.then(res => {
self.$setState({ list: self.list.splice(i, 1) });
})
.catch(self.$app.methods.catchDb);
},
done: function (i) {
var self = this;
self.list[i].doc.status = 'done';
self.$app.mod.notification.done(self.list[i].doc)
.then(res => {
self.$setState({ list: self.list.splice(i, 1) });
})
.catch(self.$app.methods.catchDb);
},
new: function() {
var self = this;
self.$setState({ doc: {}}).then(function() {
self.change();
// app.f7.calendar.create({
// inputEl: '#needAnswerDate',
// dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' },
//// openIn: 'customModal',
//// header: true,
//// footer: true,
//// routableModals: false,
// });
app.f7.autocomplete.create({
inputEl: '#search',
openIn: 'dropdown',
// dropdownContainerEl: '#dropS',
preloader: true,
valueProperty: 'label', //object's "value" property name
textProperty: 'label', //object's "text" property name
limit: 20, //limit to 20 results
typeahead: true,
highlightMatches: true,
dropdownPlaceholderText: app.f7.mod.helper.lng('searchUser'),
source: function (query, render) {
var autocomplete = this;
var results = [];
//if input empty
if (query.length === 0) {
//maybe error sometimes in mitarbeiter, maybe because autocomplete not there???
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
self.$app.mod.user.getMine(self.$app.data.user.cId, self.$app.mod.user._reader)
.then(function(data) {
// Find matched items
for (var i = 0; i < data.rows.length; i++) {
var doc = data.rows[i].doc;
doc.label = doc.surname + ' ' + doc.firstname + ', ' + doc.city + ', ' + doc.birthday;
if (doc.label.toLowerCase().indexOf(query.toLowerCase()) !== -1) results.push(doc);
}
//get articles
self.$app.mod.article.getAll()
.then(function(data) {
// Find matched items
for (var i = 0; i < data.rows.length; i++) {
var doc = data.rows[i];
doc.label = 'A: ' + doc.value;
if (doc.label.toLowerCase().indexOf(query.toLowerCase()) !== -1) results.push(doc);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
})
.catch(function(ex) {
console.log(ex);
});
})
.catch(function(ex) {
console.log(ex);
});
},
on: {
change: function (value) {
//add user to recipients
self.addRecipient(value[0]);
this.$inputEl.val(null);
}
}
});
});
},
change: function() {
var self = this;
self.$('input[type="radio"]')[0].checked = true;
self.$('.field').change(function () {
self.isDirty = true;
self.$app.methods.markDirty(self.isDirty);
});
// self.$('.dataList').addClass('disableList');
},
save: function () {
var self = this;
self.doc.txt = self.$('#txt').val();
self.doc.needAnswer = self.$('#radio').val();
self.doc.d_needAnswer = self.$('#radio').val();
self.$app.mod.notification.send(self.doc, self.recipients)
.then(res => {
// self.getClientActions();
self.isDirty = false;
self.$app.methods.markDirty(self.isDirty);
self.$(self.$('.sub-nav .tab-link')[0]).click();
})
.catch(self.$app.methods.catchDb);
},
cancel: function() {
var self = this;
self.$setState({
doc: null,
_i: null
}).then(function () {
self.isDirty = false;
self.$app.methods.markDirty(self.isDirty);
});
},
},
// Page Events
on: {
pageInit: function () {
var self = this;
app.f7.calendar.create({
inputEl: '#needAnswerDate',
dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' },
// openIn: 'customModal',
// header: true,
// footer: true,
// routableModals: false,
});
}
}
};
</script>
can someone please help me with this backdrop error?