Блог

Возможно ли экспортировать это / что мне нужно сделать, чтобы это работало. Я создал календарь с использованием javascript, который отображается с помощью innerHTML, и я хочу импортировать его в свой компонент vue. Возможно ли это? Я пробовал несколько разных способов, и все они приводили к ошибкам. Любые советы о том, как этого добиться, очень помогли бы, пожалуйста, были заложены кирпичом в течение нескольких часов

Файл Vue:

 <template>
    <div class="container-fluid">
        <div class="container-fluid">
      <div class="row" >
          <div class ="col-3">
          </div> <!-- Left Column-->
        <div class="col-6">
            <h2 class="display-8" id ='whiteWrite'>Make a Reservation</h2>
                <div id ='renderhere'>space for calender</div>
                <div class="row">
                    <div class=col>
            </div>
            </div>
            <div id ='hide'> TODO: Graph </div>
        </div> <!-- Middle Column-->

        <div class = "col-3"> 

        </div> <!-- Right Column-->
      </div>
    </div> <!-- Calender Div-->
    </div>
    

</template>

<script> 

export default {
    name: "Fred"
}
</script>

<style scoped>

</style>
 

Файл Js:

 "use strict";



class Cal {
    constructor(d, containerId){
        this._date = d;
        this._container = document.getElementById(containerId)


    }

    //Function for prev cal month
    prev(){
        this._date.setMonth(this._date.getMonth() - 1);
        this.render();
    }

    //Function for next cal month
    next(){
        this._date.setMonth(this._date.getMonth()   1);
        this.render();
    }

    _buildHeader(){
        //Month
        let month = document.createElement('div')
        month.id = 'month';

        let m = document.createElement("span");
        m.innerHTML = this._date.toLocaleString('default', {
            month: 'long'
        });

        //year
        m.innerHTML  = ` ${this._date.getFullYear()}` ;

        //define left button and bind click
        let leftBtn = document.createElement('div');
        leftBtn.id = "leftBtn";
        leftBtn.innerHTML = "<";
        leftBtn.addEventListener("click", event => this.prev());

        //define right button and bind click
        let rightBtn = document.createElement('div');
        rightBtn.id = "rightBtn";
        rightBtn.innerHTML = ">";
        rightBtn.addEventListener("click", event => this.next());

        month.appendChild(leftBtn);
        month.appendChild(m);
        month.appendChild(rightBtn);


        //build sun to sat

        let calendarHeader = document.createElement('div');
        calendarHeader.id = "calendarHeader";
        let days = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];

        days.forEach((day) =>{
            let d = document.createElement('div');
            d.innerHTML = day;
            d.className = "header";
            calendarHeader.appendChild(d);
        });


        //Add Month year   buttons to header
        this._container.appendChild(month);

        //Add days to header
        this._container.appendChild(calendarHeader);
    }

    _buildBody(){
        let calendarBody = document.createElement('div');
        calendarBody.id = "calendarBody";

        
        //Calendar Details
        let firstDay = this._dayOfTheFirstDay().getDay();
        for (let i = 0; i < firstDay; i  ){
            let d = document.createElement('div');
            d.innerHTML = "";
            d.className = 'day';
            calendarBody.appendChild(d);
        }

        //Calendar Details
        let lastDate = this._dayOfTheLastDay().getDate();
        for (let i = 1; i < lastDate   1; i  ){
            console.log(i)
            let d = document.createElement('div');
            d.innerHTML = i;
            d.className = 'day';
            d.id = "day"   i;
            calendarBody.appendChild(d);
        }
        console.log(this._container)
        this._container.appendChild(calendarBody);
    }

    _dayOfTheLastDay(){
        return (new Date(this._date.getFullYear(), this._date.getMonth()   1, 0));
    }

    _dayOfTheFirstDay(){
        return (new Date(this._date.getFullYear(), this._date.getMonth(), 1));
    }
    //call this function everytime we update calender
    render(){
        this._container.innerHTML = '';
        this._buildHeader();
        this._buildBody();
    }


}


//Renders Calender
const containerId = 'renderhere';
let calendarInstance = new Cal(new Date(), containerId);
calendarInstance.render()