Seasonal calendar – further

Hey beyond-flora,
Try this code:

function garden_progress_bars_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'pre_cultivation_start' => '',
            'pre_cultivation_end' => '',
            'planting_start' => '',
            'planting_end' => '',
            'harvest_start' => '',
            'harvest_end' => '',
            'pre_cultivation_color' => '',
            'planting_color' => '',
            'harvest_color' => '',
            'pre_cultivation_label' => '',
            'planting_label' => '',
            'harvest_label' => '',
            'pre_cultivation_link' => '',
            'planting_link' => '',
            'harvest_link' => '',
        ),
        $atts,
        'garden_progress_bars'
    );
    
    $output = '
    <style>
        .garden-progress-bars {
            font-family: Arial, sans-serif;
            max-width: 960px; 
            margin: 0 auto;
        }
        .progress-header, .progress-header div:not(.header-offset) {
            display: inline-flex;
            width: 100%;
            justify-content: space-evenly;
        }
		.progress-header div:not(.header-offset) {
    		border-left: 1px solid #eee;
        }
        .month {
            width: calc((100% - 160px)/12); 
            text-align: center;
        }
        .progress-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .label-container {
            width: 150px; 
            text-align: right;
            padding-right: 10px; 
        }
        .progress-container {
            display: flex;
            width: calc(100% - 160px); 
            align-items: center;
        }
        .progress-bar-container {
            flex-grow: 1;
            background-color: #000;
            height: 20px;
            position: relative;
        }
        .progress-bar {
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
        .progress-header .header-offset {
            width: 150px;
			display: inline-flex;
            flex-shrink: 0;
        }
    </style>
    <div class="garden-progress-bars">
        <div class="progress-header">
            <div class="header-offset"></div>'; 
            
    $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    foreach ($months as $month) {
        $output .= "<div class='month'>$month</div>";
    }
    $output .= '</div>'; 
    
    $create_progress_bar_row = function($label, $color, $start, $end, $link) use ($months) {
        $start_month_index = array_search($start, $months);
        $end_month_index = array_search($end, $months);
        $width = (($end_month_index - $start_month_index + 1) / 12) * 100;
        $left = ($start_month_index / 12) * 100;
        $bar_content = "<div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'>$label</div>";
        if ($link) {
            $bar_content = "<a href='$link' target='_blank' style='display: block; height: 100%;'>$bar_content</a>";
        }
        return "
        <div class='progress-row'>
            <div class='label-container'>$label</div>
            <div class='progress-container'>
                <div class='progress-bar-container'>
                    $bar_content
                </div>
            </div>
        </div>";
    };
    
    $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end'], $atts['pre_cultivation_link']);
    $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end'], $atts['planting_link']);
    $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end'], $atts['harvest_link']);

    $output .= '</div>'; 

    return $output;
}
add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');

and this shortcode on your page:

[garden_progress_bars 
    pre_cultivation_start="Jan" 
    pre_cultivation_end="Mar" 
    pre_cultivation_color="green" 
    pre_cultivation_label="Pre-cultivation" 
    pre_cultivation_link="https://example.com/pre-cultivation"

    planting_start="Apr" 
    planting_end="Jun" 
    planting_color="blue" 
    planting_label="Planting" 
    planting_link="https://example.com/planting"

    harvest_start="Jul" 
    harvest_end="Sep" 
    harvest_color="orange" 
    harvest_label="Harvest" 
    harvest_link="https://example.com/harvest"
]

Each bar will be a link with a new label:

Best regards,
Mike

Hi,
Unfortunately, that would cause an issue with the links, could you use another bar?

Best regards,
Mike

Hi,
Thanks for the screenshot it helps me understand better, this might work better for you as a image map. Try uploading your image and select the bars, and add the link.

then click “show me the code”

then copy the code and paste into a code block element

Best regards,
Mike

Hi,
Glad to hear that you found a plugin, I have not used it and I only found an old issue from 2018 with it, probably not an issue anymore.
Shall we close this thread then?

Best regards,
Mike