Apps

ToDo

ToDo is maintained by developers, editors, writers, reviewers or readers like you as a way to focus your collaborative efforts. As such, they represent a tentative consensus that helps improve the efficiency of the editing process.

1. You need to add these files to make it work.

                
                    <script src="app-todo.js"></script>
                      <link rel="stylesheet" type="text/css" href="app-todo.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

2. Features you can perform in toDO List.

Add new todo task
Complete task
Delete task
Search any task
Set favorite task
Set important task
Project Filter UI

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-todo.html

Email Application

Email is a very popular way of communicating with others over the Internet. An application that allows users to send, receive, and read email is called an email client.

1. You need to add these pages to make it work.

                
                    <script src="app-email.js"></script>
                      <link rel="stylesheet" type="text/css" href="app-email.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

2. Features you can perform in email application.

Compose Mail
Search mail
Delete mail
Mark mail as unread
Filter mail
Selec All mails and Delete all
On click of mail list, mail detail will slide in

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-email.html

Chat Application

Messaging or the use of chat apps are surging in popularity these days as people prefer chat-based apps over text messages as it provides real-time interactions and gives them a personal touch experience.

1. You need to add these pages to make it work.

                
                    <script src="app-chat.js"></script>
                     <link rel="stylesheet" type="text/css" href="app-chat.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

2. Features you can perform in chat application.

Notification badge of new messages
Start conversation to chat
Search User
Send message
Check personal profile
Check user's profile
Set status(Online, Offline, etc..)
Favorite Conversation

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-chat.html

Calendar

Calendar is made from Full Calendar Plugin which the most popular full-sized JavaScript Calendar. you'll have use below mentioned structure for add event modal to use add event functionality.

1. You need these files for application to work

          
              <!-- Vendor JS -->
              <script src="moment.min.js"></script>
              <script src="fullcalendar.min.js"></script>
              <script src="daygrid.min.js"></script>
              <script src="picker.js"></script>
              <script src="picker.date.js"></script>

              <!-- Page Specific JS -->
              <script src="fullcalendar.js"></script>

              <!-- Vendor CSS -->
              <link rel="stylesheet" type="text/css" href="fullcalendar.min.css">
              <link rel="stylesheet" type="text/css" href="daygrid.min.css">
              <link rel="stylesheet" type="text/css" href="pickadate.css">

              <!-- Page Specific CSS -->
              <link rel="stylesheet" type="text/css" href="fullcalendar.css">

2. Use following modal structure.

          
  <div class="modal fade text-left modal-calendar" tabindex="-1" role="dialog" aria-labelledby="cal-modal"
  aria-modal="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title text-text-bold-600" id="cal-modal">Add Event Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <form action="#">
        <div class="modal-body">
          <div class="d-flex justify-content-between align-items-center add-category">
            <div class="chip-wrapper"></div>
            <div class="label-icon pt-1 pb-2 dropdown calendar-dropdown">
              <i class="feather icon-tag dropdown-toggle" id="cal-event-category" data-toggle="dropdown"></i>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="cal-event-category">
                <span class="dropdown-item business" data-color="success">
                  <span class="bullet bullet-success bullet-sm mr-25"></span>
                  Business
                </span>
                <span class="dropdown-item work" data-color="warning">
                  <span class="bullet bullet-warning bullet-sm mr-25"></span>
                  Work
                </span>
                <span class="dropdown-item personal" data-color="danger">
                  <span class="bullet bullet-danger bullet-sm mr-25"></span>
                  Personal
                </span>
                <span class="dropdown-item others" data-color="primary">
                  <span class="bullet bullet-primary bullet-sm mr-25"></span>
                  Others
                </span>
              </div>
            </div>
          </div>
          <fieldset class="form-label-group">
            <input type="text" class="form-control" id="cal-event-title" placeholder="Event Title">
            <label for="cal-event-title">Event Title</label>
          </fieldset>
          <fieldset class="form-label-group">
            <input type="text" class="form-control pickadate" id="cal-start-date"
              placeholder="Start Date (yyyy-mm-dd)">
            <label for="cal-start-date">Start Date</label>
          </fieldset>
          <fieldset class="form-label-group">
            <input type="text" class="form-control pickadate" id="cal-end-date" placeholder="End Date (yyyy-mm-dd)">
            <label for="cal-end-date">End Date</label>
          </fieldset>
          <fieldset class="form-label-group">
            <textarea class="form-control" id="cal-description" rows="5" placeholder="Description"></textarea>
            <label for="cal-description">Description</label>
          </fieldset>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary cal-add-event waves-effect waves-light" disabled>
            Add Event</button>
          <button type="button" class="btn btn-primary d-none cal-submit-event waves-effect waves-light"
            disabled>submit</button>
          <button type="button" class="btn btn-flat-danger cancel-event waves-effect waves-light"
            data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-flat-danger remove-event d-none waves-effect waves-light"
            data-dismiss="modal">Remove</button>
        </div>
      </form>
    </div>
  </div>
</div>

3. init your calendar

          
    var calendarEl = document.getElementById('fc-default');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ["dayGrid"],
      ...
    });

4. Actions you can perform with Calendar

Add new events.
Remove existing Events.
Manage your schedule.
Add category/label to your event.
Get info of event on click.

Type	URL
Plugin Link	https://fullcalendar.io/
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-calender.html

Ecommerce Application

Electronic commerce is an emerging model of new selling and merchandising tools in which buyers are able to participate in all phases of a purchase decision, while stepping through those processes electronically rather than in a physical store or by phone (with a physical catalogue).

1. You need these files for application to work

          
              <!-- Vendor JS -->
              <script src="Wnumb.js"></script>
              <script src="noUislider.min.js"></script>
              <script src="select2.min.js"></script>

              <!-- Page Specific JS -->
              <script src="app-ecommerce-shop.js"></script>

              <!-- Vendor CSS -->
              <link rel="stylesheet" type="text/css" href="noUislider.min.css">
              <link rel="stylesheet" type="text/css" href="select2.min.css">

              <!-- Page Specific CSS -->
              <link rel="stylesheet" type="text/css" href="app-ecommerce-shop.css">

2. Use class `.grid-view` for grid view. checkout code below

          
      <section id="ecommerce-products" class="grid-view">
  <div class="card ecommerce-card">
    <div class="card-content">
      <div class="item-img text-center">
        <img src="...." alt="img-placeholder">
      </div>
      <div class="card-body">
        <div class="item-wrapper">
          <div class="item-rating">
            <div class="badge badge-primary badge-md">
              4 <i class="feather icon-star ml-25"></i>
            </div>
          </div>
          <div>
            <h6 class="item-price">
              $39.99
            </h6>
          </div>
        </div>
        <div class="item-name">
          <span>Item Name</span>
          <p class="item-company">By <span class="company-name">Google</span></p>
        </div>
        <div>
          <p class="item-description">
            Item Description
          </p>
        </div>
      </div>
      <div class="item-options text-center">
        <div class="item-wrapper">
          <div class="item-rating">
            <div class="badge badge-primary badge-md">
              4 <i class="feather icon-star ml-25"></i>
            </div>
          </div>
          <div class="item-cost">
            <h6 class="item-price">
              $39.99
            </h6>
          </div>
        </div>
        <div class="wishlist">
          <i class="fa fa-heart-o"></i> <span>Wishlist</span>
        </div>
        <div class="cart">
          <i class="feather icon-shopping-cart"></i> <span class="add-to-cart">Add to cart</span> <a
            href="app-ecommerce-checkout.html" class="view-in-cart d-none">View In Cart</a>
        </div>
      </div>
    </div>
  </div>
</section>

3. Use class `.list-view` for list view. checkout code below

          
      <section id="ecommerce-products" class="list-view">
  <div class="card ecommerce-card">
    <div class="card-content">
      <div class="item-img text-center">
        <img src="...." alt="img-placeholder">
      </div>
      <div class="card-body">
        <div class="item-wrapper">
          <div class="item-rating">
            <div class="badge badge-primary badge-md">
              4 <i class="feather icon-star ml-25"></i>
            </div>
          </div>
          <div>
            <h6 class="item-price">
              $39.99
            </h6>
          </div>
        </div>
        <div class="item-name">
          <span>Item Name</span>
          <p class="item-company">By <span class="company-name">Google</span></p>
        </div>
        <div>
          <p class="item-description">
            Item Description
          </p>
        </div>
      </div>
      <div class="item-options text-center">
        <div class="item-wrapper">
          <div class="item-rating">
            <div class="badge badge-primary badge-md">
              4 <i class="feather icon-star ml-25"></i>
            </div>
          </div>
          <div class="item-cost">
            <h6 class="item-price">
              $39.99
            </h6>
          </div>
        </div>
        <div class="wishlist">
          <i class="fa fa-heart-o"></i> <span>Wishlist</span>
        </div>
        <div class="cart">
          <i class="feather icon-shopping-cart"></i> <span class="add-to-cart">Add to cart</span> <a
            href="app-ecommerce-checkout.html" class="view-in-cart d-none">View In Cart</a>
        </div>
      </div>
    </div>
  </div>
</section>

4. Actions you can perform with eCommerce application

Add product to wishlist/cart.
Change product view between list and grid view.
Remove products from wishlist.
Place order from checkout page.
Add user details in checkout page.

Type	URL
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-shop.html

Vuexy

Back to top

Apps

ToDo

1. You need to add these files to make it work.

2. Features you can perform in toDO List.

Email Application

1. You need to add these pages to make it work.

2. Features you can perform in email application.

Chat Application

1. You need to add these pages to make it work.

2. Features you can perform in chat application.

Calendar

1. You need these files for application to work

2. Use following modal structure.

3. init your calendar

4. Actions you can perform with Calendar

Ecommerce Application

1. You need these files for application to work

2. Use class .grid-view for grid view. checkout code below

3. Use class .list-view for list view. checkout code below

4. Actions you can perform with eCommerce application

2. Use class `.grid-view` for grid view. checkout code below

3. Use class `.list-view` for list view. checkout code below