Tips on modifying event object properties in an array based on subsequent array input during calendar creation on a webpage

1. I'm faced with the challenge of developing an event calendar that is compatible with all web browsers. For instance:

2. If I schedule an event from 9:30 to 10:30 am, it should occupy 100% width on the calendar.

3. Then, when I add another event from 9:45 to 11:00 am, I want the first event (from point 2) to shrink to 50% width and be shifted right by 50% to accommodate the new event.

4. Subsequently, if I add a third event from 10:00 am to 12:00 pm, each event should now have a width of 33%, arranged without overlapping one after the other.

  1. I've been attempting to achieve this using JavaScript.
  2. I successfully managed to add two events without any overlap.
  3. However, introducing a third event results in overlap.
  4. I thought about storing each element's configuration in an array and checking previous elements' configurations to properly place the next event.

Is there a more efficient way to implement this event scheduling feature in a calendar using JavaScript? Any suggestions would be greatly appreciated!

Thank you!

javascriptcssarrays

Answer №1

If you want to enhance your layout with flexible boxes using CSS flexbox, take a look at this example. By simply adding a new item, the container will automatically adjust to accommodate it.

*{
  box-sizing: border-box;
}
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }

.flex-item {
  border: solid 1px black;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
<div class="flex-container">
<div class="flex-item"><span class="counter">1</span></div>
<div class="flex-item"><span class="counter">2</span></div>
<div class="flex-item"><span class="counter">3</span></div>
<div class="flex-item"><span class="counter">4</span></div>
</div>

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

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

My client-demo is not working as expected. I am trying to retrieve all documents from the "file" collection, but I am getting null results. https://i.sstatic.net/Pw6sA.png When testing with the mongo shell, I can see that the document data actually exist ...

javascriptnode.jsmongodbsharedb

JavaScript - Transforming Name:ItemName/Value:ItemValue Pairs into Standard ItemName:ItemValue JSON Format

Looking to reformat JSON data? [{"name":"age","value":31}, {"name":"height (inches)","value":62}, {"name":"location","value":"Boston, MA"}, {"name":"gender","value":"male"}] If you want it to be in a different format: [{"age": 31}, {"height (inches)": 6 ...

javascriptjqueryjson

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...

javascriptjqueryhtmlcsstableheader

unique close button design for pop-up video player on YouTube

Struggling to add a custom close button to my Youtube video pop up. After unsuccessful research attempts, I'm turning to my fellow stack buddies for help. Any suggestions? ...

htmlcssyoutubepopup

Struggling to fetch information from API through Express in NodeJS with MongoDB, currently loading

I am in the process of creating a Rest API using Node.js, Express, and MongoDB. Currently, I am running it on my local host:3000. When I attempt to restart and run the server, I utilize the route http://localhost:3000/drinks To send HTTP requests, I use P ...

javascriptnode.jsmongodbexpress

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup

Processing incoming requests with a loading interface in CodeIgniter

Is there a way to notify the user who sent the request whether or not the requested user will approve it? Optional: If there is no notification sent to the user who made the request, the requested user will have to wait for verification. For Example: Ima ...

javascriptphpjqueryajaxcodeigniter

Using local variables from an external HTML file within an AngularJS directive template

Just making sure I am wording my question correctly, but I have not been able to find any information on this specific topic. Imagine I have an AngularJS directive that looks something like this: angular.module( 'example', [] ).directive( ...

javascriptangularjs

What is the best way to set up a simple example using a Node Stream.Readable?

I am currently exploring the concept of streams and encountering some difficulties in making it work properly. For this scenario, my goal is to send a static object to the stream and then pipe it to the server's response. This code snippet shows my ...

javascriptnode.jsstream

Enhance Your Layout with Bootstrap 5 Images and Centered Elements

As I delve into learning Bootstrap 5, I am experimenting with creating a more "advanced" layout. The idea is to have two images positioned next to each other with titles below them, and a div centered between both. Ultimately, they will be displayed in a r ...

htmlcsstwitter-bootstraplayoutbootstrap-5

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

javascriptreactjsnavigationreact-router-dom

How to delete an item from an array of objects using ReactJS

Hello there, I am currently learning about React Js and I have encountered a problem. I need to remove an element from an array. Here is the structure of my array: array = [{ Id: "L0", value="asas"}] The array that I want to work with is stored in this ...

javascriptarraysreactjsreact-redux

A Study on Particle Systems using THREE.js

While working on my particle System in THREE.js with SPARK.js, I have completed the necessary code for the system. However, I am facing an issue where nothing related to the Particle System is being displayed on the screen. Currently, I am trying to creat ...

javascriptthree.jswebgl

The function does not get activated when mouseover event is triggered with AddEventListener

I am attempting to create a series of radio buttons, each with its own AddEventListener function. However, I am encountering issues while using the code below within a while loop that retrieves data from a MySQLI table: echo ' <script> do ...

javascriptphphtml

What makes arrays quicker than lists in Haskell?

Currently delving into Haskell, I find myself pondering the following: In Haskell, the List type serves as a fundamental data type. Interestingly, arrays in Haskell are built upon lists. These arrays consist of indices [Ix a] and function representations ...

arraysperformancelistdata-structureshaskell

Customizing Attribute for Material UI TextField

I'm currently in the process of adding a custom data attribute to a TextField component like so: class TestTextField extends React.Component { componentDidMount() {console.log(this._input)} render() { return ( <TextField label= ...

javascriptreactjsmaterial-ui

Angular's ng-include functionality allows developers to dynamically load

As a beginner in angular.js, I've written my first 'hello world' script. I'm attempting to use ng-include to bring in a navbar from the local file /templates/nav.html. Despite following a tutorial closely, I'm struggling to underst ...

javascriptangularjs

Display the current position of the caret in a field that cannot be edited

Can a virtual caret be displayed between two letter boundaries in HTML/CSS/JavaScript, for example in a regular div without using contenteditable=true? Imagine having the following: <div>Hello world</div> If I were to click between the "w" a ...

javascripthtmlcss

The link color in the UL class fails to supersede the default color for the div element

I've created a div that includes the following styles: #main-alt-2 a:link {color:#39c;} #main-alt-2 a:visited {color:#39c;} Within this same div, I have defined styles for a UL as follows: ul.menu a:link { font-weight:bold; display:block; text-deco ...

htmlcsscolorshyperlink

What could be the reason for the discrepancy between the values displayed in the two alerts? What is causing this difference in

Check out this JavaScript code snippet: var x = 3; var foo = { x: 2, baz: { x: 1, bar: function() { return this.x; } } } var go = foo.baz.bar; alert(go()); alert(foo.baz.bar()); When you run the two alert functions here, you&ap ...

javascriptfunctionoopobjectscope