Calendar is not displayed

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?