How to install jq.Schedule in Vue3 + Typescript

Question

$("#schedule").timeSchedule => error TS2339: Property 'timeSchedule' does not exist on type 'JQuery'

I think its import error

 $(function(){
        var $sc = $("#schedule").timeSchedule({
            startTime: "07:00", // schedule start time(HH:ii)
            endTime: "21:00",   // schedule end time(HH:ii)
            widthTime:60 * 10,  // cell timestamp example 10 minutes
            timeLineY:60,       // height(px)
            verticalScrollbar:20,   // scrollbar (px)
            timeLineBorder:2,   // border(top and bottom)
            bundleMoveWidth:6,  // width to move all schedules to the right of the clicked time line cell
            rows : {
                '0' : {
                    title : 'Title Area',
                    subtitle : 'Description',
                    schedule:[
                        {
                            start:'09:00',
                            end:'12:00',
                            text:'Text Area',
                            data:{
                            }
                        },
                        {
                            start:'11:00',
                            end:'14:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                },
                '1' : {
                    title : 'Title Area',
                    schedule:[
                        {
                            start:'16:00',
                            end:'17:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                }
            },
            onChange: function(node, data){
                addLog('onChange', data);
            },
            onInitRow: function(node, data){
                addLog('onInitRow', data);
            },
            onClick: function(node, data){
                addLog('onClick', data);
            },
            onAppendRow: function(node, data){
                addLog('onAppendRow', data);
            },
            onAppendSchedule: function(node, data){
                addLog('onAppendSchedule', data);
            },
            onScheduleClick: function(node, time, timeline){
                addLog('onScheduleClick', time + ' ' + timeline);
            }
        });
    });

https://github.com/ateliee/jquery.schedule https://ateliee.github.io/jquery.schedule/demo/

Execution environment: Vue3 + TypeScript

I want to use the jQuery library with TypeScript.

trying to install from the link but it is not working. I've done 'npm install' and import as follows

npm i jq.schedule --save
npm install jquery jquery-ui --save
npm install @types/jquery @types/jqueryui --save-dev

I wrote the following as I did with the other libraries, but the d.ts file seems to be wrong. import --- from 'jq.schedule'

--EDIT--

I also tried this https://blog.hrendoh.com/using-jquery-ui-in-vue-typescript-project/

I got 'ReferenceError: jQuery is not defined' but my import

import $ from 'jquery'
import "jquery-ui";

--SOLVED--

I installed rollup plugin inject to inject jQuery and set config.

vite.config.js/ts import {defineConfig, splitVendorChunkPlugin} from 'vite' import vue from '@vitejs/plugin-vue' import inject from '@rollup/plugin-inject' import Components from 'unplugin-vue-components/vite' import {BootstrapVueNextResolver} from 'unplugin-vue-components/resolvers' import { fileURLToPath, URL } from 'node:url' import vueJsx from '@vitejs/plugin-vue-jsx' import Icons from 'unplugin-icons/vite' import IconsResolve from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    Components({
      resolvers: [BootstrapVueNextResolver(),IconsResolve()],
      dts: true,
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
    splitVendorChunkPlugin(),
    inject({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
})

main.css

@import 'jq.schedule/dist/css/style.min.css';
@import 'jquery-ui-dist/jquery-ui.min.css';

import jquery-ui.css makes inject warning and I don't feel it necessary to use jq.schedule so I remove import. I don't know how it solve but my goal is jq.schedule works fine, I'll take it.