JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview:

I drew lessons from several timetable software on the market. Because the functions are too complicated, I tried to make a timetable applet and open source it. It currently supports the functions of adding and deleting timetables, and also adds a daily timetable. Overall, it feels like a fairly concise timetable. The backend is developed based on fastadmin.

GIF demo:

The open source address of gitee will be placed at the bottom

Recently I always feel that the current interface is too simple and does not meet the needs of a decent person like me, so I added the function of customizing the background of the course schedule.
New pages added:

Effect:

You need to add an entry in mine.js:

{
                name: "Set the timetable background",
                icon: "/images/scheduleIcon.png",
                url: "/pages/schedule/schedule?",
            },

Add a new page schedule

wxml code

<view style="height:{{CustomBar}}px;">
    <view class="cu-bar ev-fr-start" bindtap="BackPage" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
        <text class="cuIcon-back padding-lr-sm"></text>
        <view class="action">{{couples? "Set background for Ta":"Set the timetable background"}}</view>
    </view>
</view>
<view wx:if="{{couples}}" class="ev-mainBody">
    <view class="ev-fc-center">
        <view wx:if="{{!CouplesBG}}" data-type='Couples' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload background</text>
        </view>
        <view wx:if="{{CouplesBG}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='Couples' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{CouplesBG}}" />
            </view>
            <view class="round BGState">Couple timetable background</view>
        </view>
    </view>
    <view class="padding-top">
        <view class="title">Background start display time</view>
        <dateTimePicker type="minute" bind:change="TimePicker">
            <view class="sendTimeBox ev-fr">
                <input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" />
                <text style="font-size:24px;color:#92979D" class="cuIcon-triangledownfill padding-lr-sm"></text>
            </view>
        </dateTimePicker>
    </view>
    <view class="padding-top">
        <view class="title">Set background display duration</view>
        <button wx:for="{{displayTimeList}}" wx:key="index" class="cu-btn round margin-tb {{item.checked ? 'bg-blue':''}} margin-right" data-id="{{index}}" bind:tap="showTime">
            {{item.label}}
        </button>
    </view>
    <button bind:tap="saveCouplesBG" disabled="{{!CouplesBG}}" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type="">
        Save</button>
</view>
<view wx:else class="ev-mainBody">
    <view>
        <image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" />
    </view>
    <view>
        <text class="title">Set the timetable background</text>
        <view class="padding-top-sm tips">Users can upload their favorite pictures as the background display of the timetable (click on the picture to replace)</view>
    </view>
    <view class="ev-fr BGListBox">
        <view wx:if="{{dailySchedule}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='daily' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{dailySchedule}}" />
            </view>
            <view class="round BGState">Daily Schedule Background</view>
        </view>
        <view wx:if="{{!dailySchedule}}" data-type='daily' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload daily schedule background</text>
        </view>
        <view wx:if="{{weeklySchedule}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='week' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{weeklySchedule}}" />
            </view>
            <view class="round BGState">Weekly Schedule Background</view>
        </view>
        <view wx:if="{{!weeklySchedule}}" data-type='week' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload weekly timetable background</text>
        </view>
    </view>
    <button wx:if="{{(weeklySchedule || dailySchedule)}}" bind:tap="saveButton" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type="">
        Restore default background</button>
</view>

js code

import {
    scheduleBG,
    couplesBG,
    couplesInfoAdd,
    setbgdefault,
} from "../../utils/api/user";
//Get the application instance const app = getApp();
const dayjs = require("../../utils/dayjs/dayjs.min");
import { wxShowToast } from "../../utils/promisify";
Page({
    data: {
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        ImgUrl: app.globalData.ImgUrl,
        displayArea: app.globalData.displayArea,
        CouplesBG: null, // Couples schedule background dailySchedule: null, // Daily schedule background weeklySchedule: null, // Weekly schedule background sendTime: "now", // Couples schedule background start time displayTimeList: [
            {
                label: "One day",
                checked: false,
                time: 1,
            },
            {
                label: "one week",
                checked: true,
                time: 7,
            },
            {
                label: "one month",
                checked: false,
                time: 30,
            },
        ],
        startTime: null,
    },
    onLoad: function (query) {
        let { index_bgimage, table_bgimage } = app.globalData.userInfo;
        this.setData({
            couples: query.couples ? query.couples : null,
            dailySchedule: index_bgimage
                ? app.globalData.ImgUrl + index_bgimage
                : null, //Daily schedule background weeklySchedule: table_bgimage
                ? app.globalData.ImgUrl + table_bgimage
                : null, // Weekly schedule background});
    },
    /**
     * Go back one page */
    BackPage() {
        wx.navigateBack({
            delta: 1,
        });
    },
    /**
     * Switch display time */
    showTime(e) {
        let id = e.currentTarget.dataset.id;
        console.log(e.currentTarget.dataset.id);
        let displayTimeList = this.data.displayTimeList.map((v, i) => {
            v.checked = id === i;
            return v;
        });
        this.setData({
            displayTimeList,
        });
    },
    /**
     * Modify background */
    modifyImage(e) {
        let type = e.currentTarget.dataset.type;
        wx.chooseImage({
            count: 1,
            sizeType: ["compressed"],
            sourceType: ["album"],
            success: (res) => {
                // tempFilePath can be used as the src attribute of the img tag to display images const tempFilePaths = res.tempFilePaths;
                switch (type) {
                case "week":
                    scheduleBG(tempFilePaths[0], "table").then((v) => {
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            weeklySchedule: tempFilePaths[0],
                        });
                    });
                    break;
                case "daily":
                    scheduleBG(tempFilePaths[0], "index").then((v) => {
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            dailySchedule: tempFilePaths[0],
                        });
                    });
                    break;
                case "Couples":
                    couplesBG(tempFilePaths[0]).then((v) => {
                        console.log(v);
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            CouplesBG:
                                    app.globalData.ImgUrl + v.data.imgurl,
                        });
                    });
                    break;
                default:
                    wxShowToast("Setting failed, please try again");
                    break;
                }
            },
        });
    },
    /**
     * Restore default background */
    saveButton() {
        this.setData({
            dailySchedule: null,
            weeklySchedule: null,
        });
        setbgdefault().then((v) => {
            v.code && wxShowToast(v.msg);
            app.getSet();
        });
    },
    /**
     * Start time of couple class schedule */
    TimePicker(e) {
        let day = dayjs(e.detail).format("MM月DD日");
        let am = dayjs(e.detail).format("A") == "PM" ? "afternoon" : "morning";
        let time = dayjs(e.detail).format("HH:mm");
        let sendTime = `${day} ${am} ${time}`;
        console.log(sendTime, "TimePicker");
        this.setData({
            sendTime,
            startTime: dayjs(e.detail),
        });
    },
    /**
     * Save couple background */
    saveCouplesBG() {
        let { displayTimeList, startTime, CouplesBG } = this.data;
        let endType = displayTimeList.filter((v) => v.checked === true)[0];
        let _startTime = startTime ? dayjs(startTime) : dayjs();
        let endTime = endType.time;
        let tid = app.globalData.userInfo.lovers_id;
        if (!tid) {
            wx.showToast({
                title: "Save failed",
                icon: "none",
                duration: 2000,
            });
            return;
        }
        couplesInfoAdd({
            tid,
            starttime: _startTime.unix(),
            endtime: endTime,
            love_sort: 1,
            contents: CouplesBG.replace(this.data.ImgUrl, ""),
        }).then((v) => {
            wxShowToast(v.msg);
            if (v.code) {
                app.getSet().then(() => {
                    this.BackPage();
                });
            }
        });
    },
});

wss code

headBox {
  width: 750rpx; }

page {
  background-color: #fff; }

.BGListBox {
  flex-wrap: wrap;
  justify-content: space-between; }

.BGBox {
  width: 321rpx;
  height: 321rpx;
  border-radius: 34rpx;
  overflow: hidden;
  margin-top: 22rpx; }
  .BGBox .BGImg {
    width: 321rpx;
    height: 321rpx; }
  .BGBox .BGState {
    position: relative;
    background: #000000;
    opacity: 0.5;
    padding: 10rpx 20rpx;
    bottom: 50rpx;
    color: #fff; }

.addBG {
  width: 321rpx;
  height: 321rpx;
  margin-top: 22rpx;
  border: 1rpx dashed #92979d;
  border-radius: 24rpx;
  border-radius: 34rpx; }

.message {
  width: 70rpx;
  height: 70rpx;
  margin-top: 20rpx; }

.title {
  font-size: 32rpx;
  font-weight: 500;
  line-height: 45rpx;
  color: #282b2f; }

.tips {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 33rpx;
  color: #92979d; }

.sendTimeBox {
  width: 686rpx;
  height: 90rpx;
  background: #ffffff;
  border: 1rpx solid #dfe4ea;
  border-radius: 14rpx;
  margin: 24rpx 0; }

*** Open source address:
gitee open source: (https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable)

This is the end of this article about how to use JS to implement a small program called a class schedule (imitating the Super Class Schedule) and add a custom background function. For more relevant Super Class Schedule content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JavaScript implements class lottery applet
  • JavaScript to implement random roll call applet
  • WeChat applet 12 lines of js code to write a slider function yourself (recommended)
  • WeChat applet to obtain mobile phone number JavaScript decryption sample code detailed explanation

<<:  MySQL optimization solution: enable slow query log

>>:  Responsive layout summary (recommended)

Recommend

Docker uses root to enter the container

First run the docker container Run the command as...

Detailed tutorial on Tomcat installation and deployment in Windows 10

Table of contents 1 Java environment configuratio...

Pitfall notes of vuex and pinia in vue3

Table of contents introduce Installation and Usag...

Example code for implementing a text marquee with CSS3

Background Here's what happened, Luzhu accide...

Solution to MySQL master-slave delay problem

Today we will look at why master-slave delay occu...

HTML table tag tutorial (33): cell vertical alignment attribute VALIGN

In the vertical direction, you can set the cell a...

Introduction to version management tool Rational ClearCase

Rational ClearCase is a software configuration ma...

Using js to implement a number guessing game

Last week, the teacher gave me a small homework, ...

How to clean up data in MySQL online database

Table of contents 01 Scenario Analysis 02 Operati...

MySQL 5.6 root password modification tutorial

1. After installing MySQL 5.6, it cannot be enabl...

Summary of Mysql exists usage

Introduction EXISTS is used to check whether a su...

Vue3 (Part 2) Integrating Ant Design Vue

Table of contents 1. Integrate Ant Design Vue 2. ...

Introduction to the usage of props in Vue

Preface: In Vue, props can be used to connect ori...

MySQL cursor detailed introduction

Table of contents 1. What is a cursor? 2. How to ...