├── LICENSE ├── README.md ├── vue-fa-calendar-demo.html ├── vue-fa-calendar-demo1.jpg └── vue-fa-calendar.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Nathan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-fa-calendar 2 | customize this Vue 2 Font Awesome calendar component with your own classes 3 | 4 | ### Accepts Special Days array 5 | Pass an array that contains information about particular days, including the Font Awesome icon you want for that day. 6 | 7 | ### Uses Moment JS 8 | Moment integration allows you to specify date format, such as 'YYYY-MMM-D'. 9 | 10 | ### Printable 11 | Based on tables, you can make a calendar with several months that render to print. 12 | 13 | ### Events 14 | ##### Emits 'monthclicked' with the starting date of the month. 15 | 16 | This allows you to load more data from server, etc. 17 | 18 | ##### Emits 'dateclicked' with the date string that was clicked. 19 | 20 | This allows you to use modal dialog, or populate an edit form. 21 | 22 | ### Demo using bootstrap.css 23 | ( note Icons and selected days in each instance ) 24 | 25 | ![] (vue-fa-calendar-demo1.jpg) 26 | -------------------------------------------------------------------------------- /vue-fa-calendar-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 | 38 | 49 | -------------------------------------------------------------------------------- /vue-fa-calendar-demo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/compmeist/vue-fa-calendar/389f23c08e0161fa7641029f6f60c0c278ac33c3/vue-fa-calendar-demo1.jpg -------------------------------------------------------------------------------- /vue-fa-calendar.js: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // customize this Vue 2 Font Awesome calendar component with your own classes 4 | // 5 | // version 0.1 6 | // 7 | // Nathan Frick, 2016 8 | // MIT License 9 | // 10 | Vue.component('fa-day',{ 11 | props: { dayOfMonth: {type:String,required:true} 12 | ,faClass: {type:String,default:''} 13 | ,faText: {type:String,default:''} 14 | ,cellClss: {default:''} 15 | ,hoverTitle: {type:String} 16 | } 17 | ,computed: { 18 | facClass: function() { 19 | var faC = (this.dayOfMonth) ? this.faClass : ''; 20 | return faC; 21 | } 22 | ,cTitle: function () { 23 | var tiC = (this.hoverTitle) ? this.hoverTitle : this.dayOfMonth; 24 | return tiC; 25 | } 26 | } 27 | ,methods: { eclick: function() { 28 | this.$emit('eclick') 29 | } 30 | } 31 | ,template:`
{{ faClass.length ? faText:dayOfMonth }}
` 32 | }); 33 | 34 | 35 | Vue.component('fa-month-table',{ 36 | props: { monthDate: {type:String,default:'03/15/2016'} // can be any day in month 37 | ,dateFormat: {type:String,default:'MM/DD/YYYY'} 38 | ,tableClass: {type:String,default:'table table-bordered'} 39 | ,tableCaptionClass: {type:String,default:'text-center lead'} 40 | ,trClass: {type:String,default:''} 41 | ,thClass: {type:String,default:'text-center'} 42 | ,tdClass: {type:String,default:'text-center'} 43 | ,selectedCellClass: {type:String,default:'info'} 44 | ,specialDays: { type:Array, 45 | default: function () { return [ 46 | { date:'03/15/2016',title:'et 2?',text:'the Ides of March',faIconClass:'fa fa-commenting',cellClass:''} 47 | 48 | ] ; } 49 | } 50 | } 51 | ,data: function() { 52 | return ({ 53 | selectedDateStr:moment().format(this.dateFormat) 54 | ,baseDate: moment(this.monthDate,this.dateFormat).startOf('month').format(this.dateFormat) 55 | }); 56 | } 57 | ,computed: { 58 | baseDateMom: function() { 59 | return moment(this.baseDate,this.dateFormat); 60 | } 61 | ,dayNames:function () { var dN = []; 62 | for (var i=0;i<7;i++) dN.push(moment().weekday(i).format('ddd')); 63 | 64 | return dN; 65 | } 66 | ,baseDateTitle: function() { 67 | return this.baseDateMom.format('MMMM YYYY'); 68 | } 69 | ,baseMonthN: function () { 70 | return this.baseDateMom.month(); 71 | } 72 | ,baseWeeks: function () { 73 | var weeks = []; 74 | // get the first day and last day in the weeks that are in this month 75 | var iMom1 = moment(this.baseDateMom).startOf('week'); 76 | var iMomEnd = moment(this.baseDateMom).endOf('month').endOf('week'); 77 | while (iMom1.isBefore(iMomEnd)) 78 | { 79 | // begin constructing a week 80 | var days = []; 81 | for (var i=0;i<7;i++) { 82 | var specObj = this.getSpecialDayInfo(iMom1); // cull from user array 83 | var dteStr0 = iMom1.date().toString(); 84 | var dteStr = (this.baseMonthN == iMom1.month()) ? dteStr0 : ''; 85 | days.push({ 86 | dateStr:iMom1.format(this.dateFormat) 87 | ,idom: iMom1.date() // integer 88 | ,domnth: dteStr 89 | ,inCurrentMonth: (this.baseMonthN == iMom1.month()) 90 | ,faIconClass:specObj.faIconClass 91 | ,xtext:specObj.text 92 | ,cellClass:specObj.cellClass 93 | ,title:specObj.title 94 | }); 95 | iMom1.add(1,'days'); 96 | } 97 | 98 | weeks.push(days); 99 | } 100 | return weeks; 101 | } 102 | } 103 | ,methods: { getSpecialDayInfo: function (iMomC) { 104 | // lookup this day (iMomC) in specialDays array and get info 105 | var retObj = {}; 106 | for (var i in this.specialDays) { 107 | if (this.specialDays[i].date) { if (moment(this.specialDays[i].date,this.dateFormat).isSame(iMomC)) { 108 | if (this.specialDays[i].faIconClass) 109 | retObj.faIconClass = this.specialDays[i].faIconClass; 110 | if (this.specialDays[i].text) 111 | retObj.text = this.specialDays[i].text; 112 | if (this.specialDays[i].cellClass) 113 | retObj.cellClass = this.specialDays[i].cellClass; 114 | if (this.specialDays[i].title) 115 | retObj.title = this.specialDays[i].title; 116 | // TODO: other attributes 117 | }} 118 | } 119 | return retObj; 120 | } 121 | ,handleEClick: function (dayEntry,e) { 122 | this.selectedDateStr = dayEntry.dateStr; 123 | this.$emit('dateclicked',dayEntry.dateStr); 124 | //console.log(this.selectedDateStr); 125 | 126 | } 127 | ,bumpRight: function () { 128 | this.baseDate = moment(this.baseDate,this.dateFormat).add(1,'months').format(this.dateFormat); 129 | this.$emit('monthclicked',this.baseDate); 130 | } 131 | ,bumpLeft: function () { 132 | this.baseDate = moment(this.baseDate,this.dateFormat).add(-1,'months').format(this.dateFormat); 133 | this.$emit('monthclicked',this.baseDate); 134 | } 135 | ,tdClassObj: function(dday) { 136 | var retObj = {}; 137 | retObj[this.tdClass] = true; 138 | retObj[this.selectedCellClass] = (dday.dateStr == this.selectedDateStr); 139 | return retObj; 140 | } 141 | 142 | } 143 | ,template:` 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 |
 {{baseDateTitle}} 
{{dayName}}
152 | 153 |  {{day.xtext}} 154 | 155 |
156 | ` 157 | 158 | }); 159 | 160 | 161 | --------------------------------------------------------------------------------