Apps
Back to top

Apps

  1. Home
  2. Apps

ToDo Application

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. Required Vendor Js files
          
            // Date range picker vendor file
              <script src="moment.min.js"></script>
              <script src="daterangepicker.js"></script>
            // Select2 vendor file
              <script src="select2.full.min.js"></script>
            // Quill Editor vendor file
              <script src="quill.min.js"></script>
            // Dragula vendor file
              <script src="dragula.min.js"></script>
2. Required Vendor css files
          
            // Date range picker vendor css file
              <link rel="stylesheet" type="text/css" href="daterangepicker.css">
            // Select2 vendor css file
              <link rel="stylesheet" type="text/css" href="select2.min.css">
            // Quill Editor vendor css file
              <link rel="stylesheet" type="text/css" href="quill.snow.css">
            // Dragula vendor css file
              <link rel="stylesheet" type="text/css" href="dragula.min.css">
3. Required Template Specific Js File
            
                <script src="app-todo.js"></script>
4. Required Template Specific css File
            
                <link rel="stylesheet" type="text/css" href="app-todo.css">
5. Features you can perform in TODO application.
  • Add new task
  • Complete task
  • Delete task
  • Filter any task
  • Set favorite task
  • Task drag and drop
  • Task tags base on priority
  • Sort task ascending or descending
  • On click of todo list, edit task will open

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

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-todo.html

Contacts

Such lists may be used to form social networks with more specific purposes. Given this, contact networks for various purposes can be generated from the list.

1. Required Vendor Js file
            
              // datatables vendor file
                <script src="jquery.dataTables.min.js"></script>
                <script src="jquery.raty.js"></script>
                <script src="datatable/dataTables.bootstrap4.min.js"></script>
2. Required Vendor css file
            
              // datatables vendor css file
                <link rel="stylesheet" type="text/css" href="dataTables.bootstrap4.min.css">
3. Required Template Specific Js Files
            
                <script src="app-contacts.js"></script>
4. Required Template Specific css File
            
                <link rel="stylesheet" type="text/css" href="app-contacts.css">
2. Features you can perform in contact List.
  • Add new Contact
  • Delete Contact
  • Search Contact
  • Modify in exsiting contact
  • Favorite initialization and usage

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

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-contacts.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. Required Vendor Js file
            
              // Quill Editor vendor file
                <script src="quill.min.js"></script>
2. Required Vendor css file
            
              // Quill Editor vendor css file
                <link rel="stylesheet" type="text/css" href="quill.snow.css">
3. Required Template Specific Js Files
            
                <script src="app-email.js"></script>
4. Required Template Specific css File
            
                <link rel="stylesheet" type="text/css" href="app-email.css">
5. Features you can perform in Email application.
  • Compose Mail
  • Search mail
  • Delete mail
  • Mark mail favourite
  • Mark mail as unread
  • Select All mails and Delete all
  • Select All mails and Mark mail unread
  • On click of mail list, mail detail will slide in

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

Type URL
Template Page https://demos.pixinvent.com/modern-html-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 CSS and JS files to make it work.
        
            <script src="app-chat.js"></script>
            <link rel="stylesheet" type="text/css" href="app-chat.css">
2. Features you can perform in chat application.
  • Start conversation to chats & contacts
  • Search user
  • Send message
  • Check personal profile
  • Check user's profile
  • Added #channels
  • Favorite Conversation
  • Chat time

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

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-chat.html

Kanban Application

A kanban board is designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow). Kanban boards use cards, columns, and continuous improvement to help technology and service teams commit to the right amount of work, and get it done! jKanban allow you to create and manage Kanban Board in your project!

1. Required Vendor Js files
              
                // jKanban vendor file
                  <script src="jkanban.min.js"></script>
                // Quill Editor vendor file
                  <script src="quill.min.js"></script>
                // Date picker vendor file
                  <script src="picker.js"></script>
                  <script src="picker.date.js"></script>
2. Required Vendor css files
              
                // jKanban vendor css file
                  <link rel="stylesheet" type="text/css" href="jkanban.min.css">
                // Quill Editor vendor css file
                  <link rel="stylesheet" type="text/css" href="quill.snow.css">
                // Date picker vendor css file
                  <link rel="stylesheet" type="text/css" href="pickadate.css">
3. Required Template Specific Js Files
            
              <script src="app-kanban.js"></script>
4. Required Template Specific css Files
              
                  <link rel="stylesheet" type="text/css" href="app-kanban.css">
5. Actions you can perform with Kanban
  • Add New Kanban Board
  • Add New Item in current board
  • Delete Kanban Board
  • Delete Kanban Item
  • Open right sidebar on click event of kanban-item

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

Type URL
Plugin link https://www.riccardotartaglia.it/jkanban/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-kanban.html

Project Application

A project app contains everything that defines your workspace for a work, from users and assets, to task assigned to team members and build configurations.

1. Required Vendor Js files
        
          //- ui-datepicker
            <script src="jquery-ui.min.js"></script>
            <script src="date-pickers.js"></script>
          //- Select2
            <script src="select2.min.js"></script>
          //- dataTables
          <script src="jquery.dataTables.min.js"></script>
          <script src="dataTables.bootstrap4.min.js"></script>
          //- apexcharts
            <script src="apexcharts.min.js"></script>
2. Required Vendor css files
              
                // datatables
                <link rel="stylesheet" type="text/css" href="dataTables.bootstrap4.min.css">
                // ui-datepicker
                <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
                // apex charts
                <link rel="stylesheet" type="text/css" href="apexcharts.css">
3. Required Template Specific Js Files
            
              <script src="project-bug-list.js"></script>
              <script src="project-summary-bug.js"></script>
              <script src="project-summary.js"></script>
              <script src="date-pickers.js"></script>
4. Required Template Specific css Files
              
                  <link rel="stylesheet" type="text/css" href="project.css">
5. Project app features:
  • Project summary
  • Task list
  • Project bugs list
  • Task Progress graph

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

Type URL
Template Pages
Type URL
Project Summary https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/project-summary.html
Project Tasks https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/project-tasks.html
Project Bugs https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/project-bugs.html#

Full Calendar Application

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. Required Vendor Js files
            
                <!-- Vendor JS -->
                <script src="moment.min.js"></script>
                <script src="fullcalendar.min.js"></script>
                <script src="daygrid.min.js"></script>
                <script src="timegrid.min.js"></script>
                <script src="interactions.min.js"></script>
                // full calender advance page specific vendor js
                <script src="jquery-ui.min.js"></script>
2. Required Template Specific Js Files
            
              // full calender events page specific js
              <script src="fullcalendar-events.js"></script>
              // full calender basic page specific js
              <script src="fullcalendar.js"></script>
              // full calender advance page specific js
              <script src="fullcalendar-advance.js"></script>
3. Required Vendor css Files
          
            <!-- 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">
4. Required Template Specific css Files
                
                    <link rel="stylesheet" type="text/css" href="fullcalendar.css">
5. Initialization
        
          var calendarEl = document.getElementById('fc-default');
          var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ["dayGrid"],
            ...
          });
6. Actions you can perform with Calendar
  • Add events (Selectable)
  • Draggable events
  • Manage your schedule
  • Add events from events list
  • Multi Language calendar
  • Remove event from event list after drop on calendar
Type URL
Plugin Link https://fullcalendar.io/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/full-calender-basic.html

CLNDR Application

CLNDR is a jQuery plugin for creating calendars. Unlike most calendar plugins, this one doesn't generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it.

1. Required Vendor Js files
              
                // CLNDR vendor file
                  <script src="clndr.min.js"></script>
                // Moment vendor file
                  <script src="moment.min.js"></script>
                // Underscore.js vendor file
                  <script src="underscore-min.js"></script>
2. Required Template Specific Js Files
            
              <script src="clndr.js"></script>
3. Required Template Specific css Files
        
          <link rel="stylesheet" type="text/css" href="clndr.css">
4. Actions you can perform with CLNDR
  • Select date
  • Six row calendar
  • start and end constraints
  • Multi day events

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

Type URL
Plugin link https://kylestetz.github.io/CLNDR/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/calendars-clndr.html