how to get arguments from plugin shortcode?

Question

I'm trying to access my plugin attributes but it keeps getting the default values even if i put the desired values

that's my php file

<?php
/*
Plugin Name: Modern Calendar Plugin
*/
function modern_calendar_enqueue_scripts($atts) {
    // Enqueue custom CSS file
    wp_enqueue_style('modern-calendar-css', plugin_dir_url(__FILE__) . 'style.css');

    // Enqueue custom JavaScript file
    wp_enqueue_script('modern-calendar-js', plugin_dir_url(__FILE__) . 'script.js', array('jquery'), '', true);

    // Extract shortcode attributes
    $atts = shortcode_atts(
        array(
            'duration' => 'Default Text',
            'price' => "Call for details!", // Default text if not provided
        ),
        $atts,
        'modern_calendar'
    );

    // Sanitize text
    $duration = sanitize_text_field($atts['duration']);
    $price = sanitize_text_field($atts['price']);

    // Localize script data
    wp_localize_script('modern-calendar-js', 'calendarData', array(
        'duration' => $duration,
        'price' => $price
    ));
}
add_action('init', 'modern_calendar_enqueue_scripts');

function modern_calendar_display($atts) {
    // Extract attributes
    $atts = shortcode_atts(
        array(
            'duration' => 'Default Text',
            'price' => 'Call for details!'
        ),
        $atts,
        'modern_calendar'
    );

    ob_start(); // Start output buffering
    ?>
    <div class="modern-calendar-container">
        <div class="row">
            <div class="col s12">
                <div class="calendar-container">
                    <div class="calendar-header">
                        <button id="prevMonth" class="btn waves-effect waves-light"><i class="material-icons">Previous</i></button>
                        <h5 id="monthYear"></h5>
                        <button id="nextMonth" class="btn waves-effect waves-light"><i class="material-icons">Next</i></button>
                    </div>
                    <div class="calendar-grid" id="calendarGrid"></div>
                    <div id="buttonContainer">
                        <span id="selectedDateText">Duration: <?php echo esc_html($atts['duration']); ?> - Price: <?php echo esc_html($atts['price']); ?> </span>
                        <button id="selectedDateButton" class="btn waves-effect waves-light">Book Now!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean(); // Return the buffered content
}

add_shortcode('modern_calendar', 'modern_calendar_display');
?>

this Price: is working fine and get the value from the shortcode [modern_calendar duration="2" price="80"]

but when i try to access calendarData in javascript i get the default values 'duration' => 'Default Text', 'price' => 'Call for details!' instead of the ones i put in the shortcode

  const duration = calendarData.duration;
  const price = calendarData.price;

  // Now you can use duration and price variables in your JavaScript code
  console.log("Duration: ", duration);
  console.log("Price: ", price);

console output enter image description here