title: How can I make Bootstrap calendar without clicking the input file, this calendar will view when rendering any HTML page
body: <p>I want to show a calendar view in a html page but I do not have any idea  how to do this one.<br/> Actually in my college project, I have to integrate a bootstrap calendar in a page, where in this page the first section will be a calendar and other two sections will be transaction details. I did the other two sections. But I don't know how to create a calendar without clicking the Input field. I will just visualize a calendar with date.<br>
  How can I resolve this?</p>
  
  <p>My code is below: /index.html</p>
  
  <pre><code>&lt;section id="1"&gt;
  &lt;div class="form-group all-forms"&gt;
      &lt;div class="col-sm-3 col-sm-offset-5 r-view"&gt;
          &lt;!-- Bootstrap calendar --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="2"&gt;
  &lt;div class="col-md-12"&gt;
      &lt;div class="mstep"&gt;
          &lt;a href=""&gt;&lt;img src="modules/core/assets/xplo-theme/booking/mstep2.png" class="img-responsive"&gt;&lt;/a&gt;
          &lt;h6&gt;Pricing Details&lt;/h6&gt;
      &lt;/div&gt;
      &lt;a href=""&gt;&lt;img src="modules/core/assets/xplo-theme/booking/money.png" class="img-responsive"&gt;&lt;/a&gt;&lt;span id="go-book"&gt;How many Guests are going?&lt;/span&gt;
      &lt;table class="table table1"&gt;
          &lt;thead id="thead-color"&gt;
          &lt;tr&gt;
              &lt;th&gt;Booking Option&lt;/th&gt;
              &lt;th class="td-seat"&gt;Price&lt;/th&gt;
              &lt;th class="td-seat"&gt;Adult&lt;/th&gt;
              &lt;th class="td-seat"&gt;Children&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="td-date td-magic"&gt;
                  &lt;label for="1"&gt;&lt;/label&gt; &lt;span id="entry"&gt;Tour Price&lt;/span&gt;
              &lt;/td&gt;
              &lt;td class="td-seat td-magic-price"&gt;&lt;i class="fa fa-inr"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td class="td-seat td-magic"&gt;
                  &lt;div  class="form-group"&gt;
                      &lt;select class="form-control adult-count"&gt;
                          &lt;option value="0"&gt;0&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;option value="3"&gt;3&lt;/option&gt;
                          &lt;option value="4"&gt;4&lt;/option&gt;
                          &lt;option value="5"&gt;5&lt;/option&gt;
                          &lt;option value="6"&gt;6&lt;/option&gt;
                          &lt;option value="7"&gt;7&lt;/option&gt;
                          &lt;option value="8"&gt;8&lt;/option&gt;
                          &lt;option value="9"&gt;9&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="td-seat td-magic"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select class="form-control child-count"&gt;
                          &lt;option value="0"&gt;0&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;option value="3"&gt;3&lt;/option&gt;
                          &lt;option value="4"&gt;4&lt;/option&gt;
                          &lt;option value="5"&gt;5&lt;/option&gt;
                          &lt;option value="6"&gt;6&lt;/option&gt;
                          &lt;option value="7"&gt;7&lt;/option&gt;
                          &lt;option value="8"&gt;8&lt;/option&gt;
                          &lt;option value="9"&gt;9&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr id="sub-total"&gt;
              &lt;td class="pay"&gt;You will pay&lt;/td&gt;
              &lt;td class="sub-rs"&gt;&lt;i class="fa fa-inr"&gt;&lt;/i&gt; &lt;span&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/section&gt;    
  
  &lt;section id="3"&gt;
  &lt;div class="col-md-12 text-center payu-form"&gt;
      &lt;form method="post" id="payu-payment-form" action="https://test.payu.in/_payment"&gt;
          &lt;input type="hidden" name="key" value="gtKFFx"/&gt;
          &lt;input type="hidden" name="txnid" value=""/&gt;
          &lt;input type="hidden" name="amount" value=""/&gt;
          &lt;input type="hidden" name="productinfo" value="Product 1"/&gt;
          &lt;input type="hidden" name="firstname"  value="Amit"/&gt;
          &lt;input type="hidden" name="email"  value="abc@gmail.com"/&gt;
          &lt;input type="hidden" name="phone" value="123423233"/&gt;
          &lt;input type="hidden" name="surl" value="http://localhost:8000/success"/&gt;
          &lt;input type="hidden" name="furl" value="http://localhost:8000/fail"/&gt;
          &lt;input type="hidden" name="hash" value=""/&gt;
          &lt;button class="btn btn-success sr-only" type="submit" formtarget="_blank" &gt;Pay by PayUmoney &lt;/button&gt;
          &lt;a class="pay-by-payu" href=""&gt;&lt;img src="/modules/core/assets/xplo-theme/booking/payumoney-logo.png" alt=""&gt;&lt;/a&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/section&gt;        
  </code></pre>