Camposha
  • Home
  • Android
  • Buy Projects
  • My Account
    • Become a Member
    • Log In|Log Out
    • Free Projects
No Result
View All Result
Camposha
  • Home
  • Android
  • Buy Projects
  • My Account
    • Become a Member
    • Log In|Log Out
    • Free Projects
No Result
View All Result
Camposha
No Result
View All Result
ADVERTISEMENT
Home Javascript Framework7

Framework7 => Calender – Get and Set Multiple Dates

2 years ago
in Framework7
Reading Time: 4min read
38 2
A A
40
SHARES
4k
VIEWS
Share on FacebookShare on Twitter
ADVERTISEMENT

Framework7 is a full featured HTML5 framework suiteable for developing hybrid mobile and web applications. it comes with two themes: material theme for android and ios theme. Framework7 has dozens if not hundreds of easy and ready to use components. Among them is calender widget.

Calender can be used to display dates. We can also set events and date ranges. In this tutorial we see how to display date via calender, get date programmatically and also set dates. We get and set multiple dates on the calender. Check the video tutorial for demo.

Questions this Project answers.

  • Framework7 calender.
  • Framework get and set multiple dates on calender.
  • Getting started with framework7.
  • Framework7 tutorial.

Libraries Used

These are the third parties used in this project.

  • Framework7
Screenshot
  • Here’s the screenshot of the project.

Framework7 Calender

  • Project Structure

Project Structure

Tools used

Language: Javascript,HTML,CSS

Framework: Framework7

IDE: PHPStorm.

Topic: Framework7 Calender.

Source Code

Lets have a look at the source code.

index.html

  • Our index.html file.
  • We reference framework7 material css in the header.
  • We also reference our javascript scripts at the base of the body.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
    <title>Camposha.info</title>
 
    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/my-app.css">
 
  </head>
  <body>
 
    <!-- VIEWS-->
    <div class="views">
 
      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">
 
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
 
            <!-- We have home navbar without left link-->
            <div class="center sliding">Camposha.info</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
 
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
 
          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">
 
            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title">Calender</div>
              <div class="content-block"><p>Framework7 Calender Get and Set Dates</p></div>
              <div class="list-block">
                <ul>
                  <li>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-input">
                          <input type="text" placeholder="Enter Launch Dates" readonly id="mCalenderID">
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
 
              <div class="content-block-title">Dates</div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="getDateBtn" class="button button-raised button-fill color-cyan">Get Dates</a></div>
                  <div class="col-50"><a href="#" id="setDateBtn" class="button button-raised button-fill color-teal">Set Dates</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
 
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Home</a><a href="#" class="link">About Us</a></div>
        </div>
      </div>
    </div>
 
    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>

main.js

  • Main class.
  • Instantiate Calender,passing in option parameters
  • Get selected dates.
  • Set array of dates

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var mainClass=function()
{
    /*
     -Initialize your app
     -Export selectors engine
     */
    var myApp = new Framework7();
    var $$ = Dom7;
 
    /*
    - Initialize app
     */
    this.initializeApp=function()
    {
        var myCalender = myApp.calendar({
            input: '#mCalenderID',
            multiple:true,
            dateFormat:'dd-mm-yyyy'
        });
        $$('#getDateBtn').on('click', function () {
           myApp.alert(myCalender.value);
        });
        $$('#setDateBtn').on('click', function () {
            var dates=[new Date('2016-10-21'),new Date('2015-9-20'),new Date('2014-8-19')]
            myCalender.setValue(dates);
        });
 
    }
}
 
m=new mainClass();
m.initializeApp();

Video Tutorial

Below is the video version of this tutorial. https://youtu.be/B6rb2u5JQZg

Download

  • Download the Project below.

Download

SimilarPosts

Framework7 => Chips/Tags – ADD UPDATE

2 years ago
4k

Framework7 => Chis/Tags – Add From Javascript Array

2 years ago
4k

Framework7 => Toolbar Tabs – Navigate Pages with Images and Text

2 years ago
4k

Framework7 => Multiple Pages.

2 years ago
4k

How to Download and Run.

  1. Download the project above.
  2. You’ll get a zipped file,extract it.
  3. You’ll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That’s it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Share16Tweet10Send
ADVERTISEMENT

Related Posts

Framework7

Framework7 => Chips/Tags – ADD UPDATE

December 19, 2020
4k
Framework7

Framework7 => Chis/Tags – Add From Javascript Array

December 19, 2020
4k
Framework7

Framework7 => Toolbar Tabs – Navigate Pages with Images and Text

December 19, 2020
4k
Framework7

Framework7 => Multiple Pages.

December 19, 2020
4k
Framework7

Framework7 – Modals and Callbacks

December 19, 2020
4.1k
Framework7  – Hello World Button and Dialog
Framework7

Framework7 – Hello World Button and Dialog

December 19, 2020
4k
ADVERTISEMENT

Get Free Projects

  • Home
  • Android
  • Buy Projects
  • My Account

© 2021 Camposha

No Result
View All Result
  • Account
  • Activate
  • Activity
  • Become a Teacher
  • Become a Teacher
  • Become a Teacher
  • Become instructor
  • Blog
  • Blog
  • Cancel Payment
  • Cancel Payment
  • Cart
  • Change Password
  • Change Password
  • Checkout
  • Checkout
  • Checkout
  • Contact
  • Contact
  • Contact Us
  • Content restricted
  • Course Checkout
  • Dashboard
  • Edit Profile
  • Edit Profile
  • FAQs
  • Forgot Password
  • Forgot Password
  • Guest
  • Guest
  • Home
  • Home
  • Home Light
  • Instructor Dashboard
  • Instructor Registration
  • IUMP – Account Page
  • IUMP – Default Redirect Page
  • IUMP – Login
  • IUMP – LogOut
  • IUMP – Register
  • IUMP – Reset Password
  • IUMP – TOS Page
  • IUMP – Visitor Inside User Page
  • List courses
  • List wish list
  • Login
  • Login
  • Maintenance
  • Members
  • Membership Account
    • Membership Billing
    • Membership Cancel
    • Membership Checkout
    • Membership Confirmation
    • Membership Invoice
    • Membership Levels
  • Membership Account
    • Membership Billing
    • Membership Cancel
    • Membership Checkout
    • Membership Confirmation
    • Membership Invoice
    • Membership Levels
  • Membership Plans
  • My Account
  • OnePage Documentation
  • Portfolio Grid
  • Portfolio Masonry
  • Portfolio Multigrid
  • Privacy Policy
  • Products
  • Profile
  • Profile
  • Profile
  • Projects
  • Register
  • Register
  • Register
  • Register
  • Sample Page
  • Shop
  • Sign in
  • Sign up
  • Student profile
  • Student Registration
  • Thank You
  • Thank You

© 2021 Camposha

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In