Designing a custom HTML calendar

I am currently working on a school project where I am creating a calendar using HTML.

So far, I have set up the basic structure of the page. What I want to achieve is a functional calendar where users can create appointments that will be displayed accordingly.

Here is what I have done so far (it's in Danish, but translation is available upon request):

HTML:

<html>
<head>
    <title>December</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script src="javascript.js"></script>
</head>
<body>

    <div class="navigation">
                <div id="forrige">
                    <a href="november.html">Previous month</a> 
                </div>

                <div id="naeste">
                    <a href="januar.html">Next month</a>
                </div>
            </div>

    <br><br>

    <table class="ugedage">
                <tr>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                    <th>Saturday</th>
                    <th>Sunday</th>
                </tr>
                //... rest of the table content

CSS:

.ugedage {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}
//...rest of CSS styles

The JavaScript snippet:

//...JavaScript code

Currently, I have only created calendars for the current month and the next two months manually. If you know a way to automate this process, I would appreciate your input. However, my main concern is how to enable users to add appointments when they click on specific dates in the calendar.

Any guidance on how to achieve this functionality would be very helpful. As I have limited knowledge beyond basic HTML and PHP, implementing such features with JavaScript seems daunting to me.

Feel free to ask for more information if needed. Thank you :-)

Answer №1

I have implemented the jQuery code you require.

let tableRow = $('tr');
tableRow.each((ind,row) =>{ // Loop through each row

    if(ind !== 0) return; // Only need one entry!

    $('td').each((ind,day) => { // Loop through each day
        if($(day).hasClass('grayedout')) return; // Skip grayed out days

        $(day).on('click',addApointment); // Trigger function on click
    });
})

function addApointment() {
    let dayNumber = $(this).text();
    let appointment =
    prompt(`Please enter your appointment for the ${dayNumber}th:`);
}

JSFleek Link

The dayNumber variable stores the clicked day number, while the appointment variable holds the user's appointment input. Feel free to utilize this information in your PHP programming. Best of luck!

Answer №2

// This amazing component has been a game-changer for my projects:

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<input id='calendar' />
<input type="button" value="getValue()" id="btn" />
<script>
let instance = jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY HH:MM',
    time: true,
    onchange: function() {
        console.log(arguments)
    }
});

document.getElementById('btn').addEventListener('click', function() {
    alert(instance.getValue());
});
</script>
</html>

//For more information, check out this link:
https://jsuites.net/docs/color-picker

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when attempting to execute a JavaScript AppleScript from another JavaScript AppleScript due to permissions error

I am in the process of organizing my .applescript files by separating them into different ones for better organization. Within my JS AppleScript file named Test.applescript, I am attempting to execute another JS AppleScript file called Group Tracks Depend ...

Prevent Overflow with Hidden Setting, Use Cover for Background Image, and Optimize for Anchors and

I'm currently working on a page that is designed not to scroll vertically. If you'd like to see the page with the issue I'm encountering for reference, you can visit Everything has been running smoothly except for two specific issues: W ...

Unable to modify the color of the alert notification in JavaScript using React

I've been attempting to create an alert component, but I'm facing an issue with adjusting the color of the alert message. Upon enabling dark mode in the navbar (located at the bottom of the navbar component code), an alert message confirming the ...

Creating beautiful user interfaces with Material UI and React

I'm currently exploring how to integrate Material UI into my React project. After successfully installing the module, I attempted to create a custom button component. Here is my Button.js file: import React from 'react'; import FlatButton ...

How to apply hover effect to an image within a div using TailwindCSS

Is there a way to animate only the image and not the entire card (div) when hovering over it? I want specifically for the image to perform an animation, such as bounce effect. I'm using next/image for displaying the image. Can this animation be achie ...

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

I am trying to implement a unique feature for a link using a Bootstrap button, where it only works on the second click. On the first click, the appearance of the link should change slightly. To achieve this, I am utilizing the .addClass(newClass), .removeC ...

Equalizing the width of the border to match the width of the text

After designing a menu using a website builder with custom CSS, I found that the HTML code generated automatically by the builder needed some tweaking. Upon inspecting the code, I discovered the following structure: <div class="elementor-container elem ...

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

I am in the process of developing a chat application and my goal is to achieve a smooth scrolling animation that automatically moves the page down to the bottom of the div when dynamic messages are loaded. <ul id="messages"> <li ...

Can an event be passed from one Vue.js component to another without relying on a global EventBus?

I have two independent components that are not directly related to each other. However, I want them to be able to communicate so that when an event is triggered in one component, the other component can respond accordingly. For example, let's conside ...

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

While HTML5 spellcheck functionality may vary across different browsers, there are instances where it might not be supported in certain corporate environments. In the event that HTML5 is not supported in a particular browser, it's essential to first c ...

Using a custom ParcelJS plugin from the local directory

I am interested in developing a plugin to enable raw loading of a specific type of file with Parcel. According to the documentation, Parcel detects plugins published on npm with certain prefixes and automatically loads them along with their dependencies li ...

Reduce XSLTProcessor output by 50%

I have a persistent problem (from my perspective, at least). Every time I use XSLTProcessor.transformToFragment, the output is consistently halved compared to the input. For example, when I receive 200 entries in an XML file as a response from a webservi ...

Google Calendar Data in JSON Format

After establishing a public calendar on Google, I aimed to utilize its JSON file for embedding it onto my website. The link to view the calendar is available here. I am encountering difficulties in executing it, and what strikes me is that renowned JSON f ...

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

Display a message on the webpage itself, not in a pop-up, when the value exceeds 1 using JavaScript

I need help with a condition involving a variable called "truecount." If this value is less than one, I would like to display an error message on the screen instead of an alert popup. Could someone assist me with this? I am new to this and don't have ...

Enhance each category changing with jQuery page transitions

Is there a way to add page transitions based on category names and quantities in PHP? For example, when clicking on the "office" category, can a popup overlay be displayed with the category name and quantity while the content loads? The focus is on creat ...

Font size too large when using the em unit

The default font-size of my code is set to 10px or 0.625em. According to this, to make the font size of <p> 7px, I should use 0.7em. However, in my case, the browser is consistently using a fixed font size of 9px, even when I decrease the font size o ...

Can you point me in the direction of some resources for developing a custom plugin with stylelint?

After visiting the stylelint website and github, I downloaded it locally using npm. The stylelint website suggests using the following format to create my own plugin: var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOpt ...

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...